import ComponentLibrary
import Localization
import SwiftUI

struct PhoneEntryView: View {
    @FocusState private var focusedState: Bool

    var title: String
    var isWorking: Bool
    var footer: String?
    var confirmTapped: () -> Void
    @Binding var value: String
    @State var phoneNumberFieldCountryCodeBehavior = CountryCodeEntryMode.interactive
    @Binding var focused: Bool

    var body: some View {
        VStack {
            Spacer()

            PhoneNumberField(text: $value, countryCodeBehavior: $phoneNumberFieldCountryCodeBehavior, onEmptyBackspace: {})
                .lineLimit(1)
                .focused($focusedState)

            Spacer()

            ZStack {
                PrimaryButtonV1(
                    title: L10n.FeatureSocial.confirm,
                    isLoading: isWorking,
                    colorCombination: .dark,
                    preferredSize: .large,
                    action: confirmTapped
                )
                .opacity(value.isEmpty ? 0 : 1)
                .animation(.default, value: value.isEmpty)

                if let footer = footer, value.isEmpty {
                    Text(footer)
                        .typographyV1(.caption)
                        .foregroundColor(.SemanticV1.textSecondary)
                        .multilineTextAlignment(.center)
                        .fixedSize(horizontal: false, vertical: true)
                        .opacity(value.isEmpty ? 1 : 0)
                }
            }
        }
        .padding([.leading, .trailing, .bottom], 24)
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text(title)
                    .typographyV1(.headline4)
                    .foregroundStyle(Color.SemanticV1.textPrimary)
            }
        }
        .bind($focused, to: $focusedState)
    }
}

#Preview {
    @Previewable @State var value = ""
    PhoneEntryView(
        title: L10n.FeatureSocial.phoneEntrySignInNavigationTitle,
        isWorking: false,
        confirmTapped: {},
        value: $value,
        focused: .constant(true)
    )
}