import SwiftUI
import Bedrock

struct LogoCustomColorPickerSheet: View {
    @Environment(\.dismiss) private var dismiss

    let initialColor: Color
    let onSelect: (Color) -> Void

    @State private var selectedColor: Color

    init(initialColor: Color, onSelect: @escaping (Color) -> Void) {
        self.initialColor = initialColor
        self.onSelect = onSelect
        self._selectedColor = State(initialValue: initialColor)
    }

    var body: some View {
        NavigationStack {
            VStack(spacing: Design.Spacing.xLarge) {
                ColorPicker("Select a color", selection: $selectedColor, supportsOpacity: false)
                    .labelsHidden()
                    .scaleEffect(2.0)
                    .frame(height: 100)

                RoundedRectangle(cornerRadius: Design.CornerRadius.medium)
                    .fill(selectedColor)
                    .frame(height: 100)
                    .overlay(
                        RoundedRectangle(cornerRadius: Design.CornerRadius.medium)
                            .stroke(Color.Text.tertiary.opacity(Design.Opacity.light), lineWidth: Design.LineWidth.thin)
                    )

                Spacer()
            }
            .padding(Design.Spacing.xLarge)
            .navigationTitle("Custom color")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") {
                        dismiss()
                    }
                }

                ToolbarItem(placement: .confirmationAction) {
                    Button("Done") {
                        onSelect(selectedColor)
                        dismiss()
                    }
                    .bold()
                }
            }
        }
        .presentationDetents([.medium])
    }
}
