import Localization
import SwiftUI

public struct FtuxTwoSongs: View {
    public var onDismiss: () -> Void

    @State private var gestureDownIsAnimating = false
    @State private var gestureDownArrowUpValue = 1.0
    @State private var gestureDownArrowDownValue = 0.0

    public var body: some View {
        Color.SemanticV1.backgroundPrimary.opacity(0.75)
            .overlay {
                VStack(spacing: 16) {
                    ZStack {
                        Image.Assets.gestureDownArrowUp
                            .offset(x: -20)
                            .opacity(gestureDownArrowUpValue)
                            .onAppear {
                                withAnimation(.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
                                    gestureDownArrowUpValue = 0
                                }
                            }

                        Image.Assets.gestureDownArrowDown
                            .offset(x: -20)
                            .opacity(gestureDownArrowDownValue)
                            .onAppear {
                                withAnimation(.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
                                    gestureDownArrowDownValue = 1
                                }
                            }

                        Image.Assets.gestureDownHand
                            .offset(x: 10)
                            .rotationEffect(Angle(degrees: gestureDownIsAnimating ? -80 : 0))
                            .onAppear {
                                withAnimation(.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
                                    gestureDownIsAnimating = true
                                }
                            }
                    }
                    .frame(width: 100, height: 100)

                    Text(L10n.FeaturePlayer.ftuxTwoSongsMessage)
                        .typographyV1(.headline4)
                        .foregroundStyle(Color.SemanticV1.textPrimary)
                        .multilineTextAlignment(.center)

                    Button {
                        onDismiss()
                    } label: {
                        Text(L10n.FeaturePlayer.gotIt)
                            .typographyV1(.body1)
                    }
                    .foregroundStyle(Color.SemanticV1.textLink)
                }
                .padding(42)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .environment(\.colorScheme, .dark)
            .ignoresSafeArea()
            .onTapGesture { onDismiss() }
    }
}

#Preview {
    FtuxTwoSongs(onDismiss: {})
}