import ComponentLibrary
import ComposableArchitecture
import Localization
import SwiftUI
import Utilities

@Reducer
public struct RemixBanner {
    public init() {}

    public struct State: Equatable {
        public init() {}
    }

    public enum Action {
        case delegate(Delegate)

        public enum Delegate {
            case bannerTapped
            case dismissTapped
        }
    }

    @Dependency(\.dismiss) private var dismiss

    public var body: some ReducerOf<Self> {
        Reduce { _, _ in
            .none
        }
    }
}

public struct RemixBannerView: View {
    private let store: StoreOf<RemixBanner>

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

    public var body: some View {
        HStack(spacing: 12) {
            Image.Icon.remix
                .resizable()
                .frame(width: 24, height: 24)

            VStack(spacing: 0) {
                HStack(spacing: 8) {
                    Text(L10n.FeatureRemix.bannerTitle)
                        .typographyV1(.bannerTitle)

                    NewLabel()
                        .foregroundStyle(Color.SemanticV1.alwaysBlack1)
                }
                .frame(maxWidth: .infinity, alignment: .leading)

                Text(L10n.FeatureRemix.bannerDetail)
                    .typographyV1(.bannerDetail)
                    .lineLimit(1)
                    .opacity(0.5)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }

            Button {
                store.send(.delegate(.dismissTapped))
            } label: {
                Image.Icon.close
                    .resizable()
                    .frame(width: 24, height: 24)
                    .padding(.bottom, 20)
            }
        }
        .padding(16)
        .frame(maxWidth: .infinity)
        .colorScheme(.dark)
        .foregroundStyle(Color.SemanticV2.foregroundPrimary)
        .onTapGesture {
            store.send(.delegate(.bannerTapped))
        }
        .background(
            Image(.bannerBackground)
                .resizable()
        )
        .clipShape(.rect(cornerRadius: 8))
    }
}