import SwiftUI
import Bedrock

/// A sheet that displays header layout options as a live preview carousel.
struct HeaderLayoutPickerView: View {
    @Environment(\.dismiss) private var dismiss
    
    @Binding var selectedLayout: CardHeaderLayout
    let photoData: Data?
    let coverPhotoData: Data?
    let logoData: Data?
    let avatarSystemName: String
    let theme: CardTheme
    let displayName: String
    let role: String
    let company: String
    
    @State private var currentLayout: CardHeaderLayout
    
    init(
        selectedLayout: Binding<CardHeaderLayout>,
        photoData: Data?,
        coverPhotoData: Data?,
        logoData: Data?,
        avatarSystemName: String,
        theme: CardTheme,
        displayName: String,
        role: String,
        company: String
    ) {
        self._selectedLayout = selectedLayout
        self.photoData = photoData
        self.coverPhotoData = coverPhotoData
        self.logoData = logoData
        self.avatarSystemName = avatarSystemName
        self.theme = theme
        self.displayName = displayName
        self.role = role
        self.company = company
        self._currentLayout = State(initialValue: selectedLayout.wrappedValue)
    }
    
    private var suggestedLayout: CardHeaderLayout {
        CardHeaderLayout.suggested(
            hasProfile: photoData != nil,
            hasCover: coverPhotoData != nil,
            hasLogo: logoData != nil
        )
    }
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                ScrollViewReader { proxy in
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: Design.Spacing.large) {
                            ForEach(CardHeaderLayout.allCases) { layout in
                                LayoutPreviewCard(
                                    layout: layout,
                                    isSelected: currentLayout == layout,
                                    isSuggested: layout == suggestedLayout,
                                    photoData: photoData,
                                    coverPhotoData: coverPhotoData,
                                    logoData: logoData,
                                    avatarSystemName: avatarSystemName,
                                    theme: theme
                                ) {
                                    withAnimation(.snappy(duration: Design.Animation.quick)) {
                                        currentLayout = layout
                                    }
                                }
                                .id(layout)
                            }
                        }
                        .padding(.horizontal, Design.Spacing.xLarge)
                        .padding(.vertical, Design.Spacing.large)
                    }
                    .onAppear {
                        proxy.scrollTo(currentLayout, anchor: .center)
                    }
                }
                .scrollClipDisabled()
                
                Spacer()
                
                Button {
                    selectedLayout = currentLayout
                    dismiss()
                } label: {
                    Text("Confirm layout")
                        .typography(.heading)
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, Design.Spacing.large)
                        .background(.black)
                        .clipShape(.rect(cornerRadius: Design.CornerRadius.medium))
                }
                .padding(.horizontal, Design.Spacing.xLarge)
                .padding(.bottom, Design.Spacing.xLarge)
            }
            .background(Color.AppBackground.base)
            .navigationTitle("Choose a layout")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button {
                        dismiss()
                    } label: {
                        Image(systemName: "xmark")
                            .typography(.body)
                            .foregroundStyle(Color.Text.primary)
                    }
                }
            }
        }
    }
}

// MARK: - Preview

#Preview {
    @Previewable @State var selectedLayout: CardHeaderLayout = .profileBanner
    
    HeaderLayoutPickerView(
        selectedLayout: $selectedLayout,
        photoData: nil,
        coverPhotoData: nil,
        logoData: nil,
        avatarSystemName: "person.crop.circle",
        theme: .coral,
        displayName: "John Doe",
        role: "Developer",
        company: "Acme Inc"
    )
}
