import Foundation
import Localization
import SwiftUI

public struct CaptionTextField: View {
    @Binding var caption: String
    @FocusState.Binding var isFocused: Bool
    let placeHolderText: String
    let characterLimit: Int?
    private let textFieldHeight: CGFloat = 100

    public init(
        caption: Binding<String>,
        isFocused: FocusState<Bool>.Binding,
        placeHolderText: String,
        characterLimit: Int?
    ) {
        self._caption = caption
        self._isFocused = isFocused
        self.placeHolderText = placeHolderText
        self.characterLimit = characterLimit
    }

    public var body: some View {
        VStack(spacing: 0) {
            textField
            if let characterLimit = characterLimit {
                characterCount(limit: characterLimit)
            }
        }
        .frame(height: textFieldHeight)
        .contentShape(Rectangle())
        .onTapGesture {
            isFocused = true
        }
        .padding(.bottom, 6)
    }

    @ViewBuilder
    private var textField: some View {
        TextField(
            text: $caption,
            axis: .vertical
        ) {
            Text(placeHolderText)
                .typographyV1(.body1.size { _ in 14.0 }.lineHeight(20.0))
                .foregroundStyle(Color.SemanticV1.foregroundInactive)
        }
        .submitLabel(.return)
        .typographyV1(.body1.size { _ in 14.0 }.lineHeight(20.0))
        .multilineTextAlignment(.leading)
        .lineSpacing(1.25)
        .frame(height: textFieldHeight, alignment: .top)
        .padding(.vertical, 8)
        .tint(Color.SemanticV2.accentBrand)
        .contentShape(.rect)
        .focused($isFocused)
    }

    private func characterCount(limit: Int) -> some View {
        HStack {
            Spacer()
            Text("\(caption.count)/\(limit)")
                .font(.caption2)
                .foregroundStyle(Color.SemanticV1.foregroundInactive)
        }
    }
}