import APIClient
import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI

public struct BlendedCreateControls: View {
    @Bindable var store: StoreOf<BlendedCreate>
    let toolbarItemHeight: CGFloat = 50 // Figure out something better here later... for now this matches `PillButtonSizeV1.medium`'s height
    @Namespace private var internalNamespace

    @State var lastLyricsMode: BlendedCreatePrompt.LyricsMode = .auto

    private var lyricsModeBinding: Binding<Bool> {
        Binding<Bool>(
            get: { store.prompt.lyricsMode == .instrumental },
            set: { newValue in
                if newValue {
                    self.lastLyricsMode = store.prompt.lyricsMode
                    store.prompt.lyricsMode = .instrumental
                } else if store.prompt.lyricsMode == .instrumental {
                    store.prompt.lyricsMode = self.lastLyricsMode
                }
            }
        )
    }

    public init(
        store: StoreOf<BlendedCreate>
    ) {
        self.store = store
    }

    public var body: some View {
        VStack(spacing: 10) {
            HStack(alignment: .center) {
                if store.showCreateButton {
                    BlendedToolbarButtonView(
                        image: Image.Icon.trashV2,
                        color: Color.SemanticV2.backgroundPrimary,
                        backgroundColor: Color.SemanticV2.foregroundPrimary
                    ) {
                        store.send(.controls(.didTapClearButton))
                        UINotificationFeedbackGenerator().notificationOccurred(.warning)
                    }
                    .frame(width: 42, height: 42)
                    .transition(.opacity)
                    .zIndex(1) // Button breaks when focused without this...

                    BlendedCreateAuraButton(
                        title: L10n.FeatureCreateClip.create,
                        isLoading: store.isCreateButtonLoading,
                        auraStyle: .pink,
                        leadingView: {
                            Image.Icon.create
                                .foregroundStyle(Color.SemanticV2.foregroundPrimaryOnDark)
                        },
                        action: {
                            store.send(.controls(.didTapCreateButton))
                            UINotificationFeedbackGenerator().notificationOccurred(.success)
                        }
                    )
                    .disabled(!store.prompt.canCreate)
                    .opacity(store.prompt.canCreate ? 1.0 : 0.5)
                    .matchedGeometryEffect(id: "capsule", in: internalNamespace)
                    .transition(.scale)
                    .animation(.bouncy(duration: 0.25), value: store.showCreateButton)
                } else if store.showTabControls {
                    SegmentedPicker(
                        selection: $store.currentTab.sending(\.controls.didSelectTab),
                        items: store.tabs,
                        foregroundColorSelected: Color.SemanticV2.foregroundPrimary,
                        foregroundColorNotSelected: Color.SemanticV2.backgroundPrimary,
                        style: .circle,
                        backgroundBlurOpacity: 0,
                        useSlideTransition: true
                    ) { tab in
                        switch tab {
                        case .audio: Image.Icon.microphoneCreate

                        case .promptBuilder: Image.Icon.create
                            .resizable()
                            .frame(width: 22, height: 24)

                        case .camera: Image.Icon.cameraCreate
                        }
                    }
                    .background {
                        Color.SemanticV2.foregroundPrimary
                            .clipShape(.capsule)
                    }
                    .frame(width: 104, height: toolbarItemHeight)
                    .matchedGeometryEffect(id: "capsule", in: internalNamespace)
                    .transition(.scale)
                    .animation(.bouncy(duration: 0.25), value: store.showTabControls)
                }
            }
            .padding(10)
        }
        .animation(.bouncy(duration: 0.25), value: store.prompt.canCreate)
    }
}