import ComponentLibrary
import ComposableArchitecture
import FeatureBrandedAlert
import Localization
import SwiftUI
import Utilities

public struct LibraryScreenHeader: View {
    let store: StoreOf<Library>
    @State private var hapticProxy = 0

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

    public var body: some View {
        VStack(spacing: 16) {
            HStack(spacing: 16) {
                Button {
                    store.send(.likedSongsTapped)
                } label: {
                    Image.Assets.likedSongsV2
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(8)
                        .overlay(alignment: .topLeading) {
                            Text(L10n.FeatureCatalog.liked)
                                .typographyV1(.headline5)
                                .foregroundStyle(Color.SemanticV1.textPrimary)
                                .padding(.top, 16)
                                .padding(.leading, 11)
                        }
                        .environment(\.colorScheme, .dark)
                }
                .buttonStyle(ScaleButtonStyle(scaleAmount: 0.98))

                Button {
                    store.send(.playlistsTapped)
                } label: {
                    Image.Assets.playlists
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(8)
                        .overlay(alignment: .topLeading) {
                            Text(L10n.FeatureCatalog.playlists)
                                .typographyV1(.headline5)
                                .foregroundStyle(Color.SemanticV1.textPrimary)
                                .padding(.top, 16)
                                .padding(.leading, 11)
                        }
                        .environment(\.colorScheme, .dark)
                }
                .buttonStyle(ScaleButtonStyle(scaleAmount: 0.98))
            }

            HStack {
                Text(L10n.FeatureCatalog.mySongs)
                    .typographyV1(.headline5)
                    .foregroundColor(Color.SemanticV1.textPrimary)

                Spacer()

                LibraryFilterMenu(store: store)
            }
        }
        .padding(.bottom, 24)
        .padding(.top, 8)
    }
}

struct LibraryFilterMenu: View {
    let store: StoreOf<Library>
    @State private var hapticProxy = 0

    var body: some View {
        Menu {
            FilterOptionsMenu(store: store.scope(state: \.filterState, action: \.filterAction))
        } label: {
            HStack(spacing: 8) {
                Text(store.selectedMenuFilter.title)
                    .typographyV1(.body1)
                Image.Icon.filter
            }
            .fixedSize()
            .foregroundStyle(Color.SemanticV1.iconPrimary)
            .padding(8)
            .padding(.horizontal, 4)
            .frame(minWidth: 150, alignment: .trailing) // Fixes a clipping issue with menus
        }
        .animation(.snappy, value: store.selectedMenuFilter)
    }
}