import BusX
import SwiftUI

extension MeetupId {
  public struct V: View {
    let id: String
    @StateObject var isJoinAvailable = BusUI.ManyValue(K.isJoinAvailable, false)
    @StateObject var isLoading = BusUI.ManyValue(K.isLoading, false)
    @StateObject var join = BusUI.ManyButton(K.join)
    @StateObject var textField = BusUI.ManyTextField(K.textApp, K.textUI)
    
    public init(_ id: String) {
      self.id = id
    }
    
    public var body: some View {
      VStack(spacing: 8) {
        HStack {
          ManyTextField("Binding-3", value: $textField.v, formatter: BusUI.TextFieldSource())
            .disabled(isLoading.v)
            .padding(8)
            .border(
              !isLoading.v ? Color.black : Color.gray,
              width: !isLoading.v ? 2 : 1
            )
          if isLoading.v {
            ProgressView()
              .padding(8)
          }
        }

        ManyButton(action: join.v.send) {
          Text("Join")
            .padding(8)
            .border(
              isJoinAvailable.v ? Color.green : Color.gray,
              width: isJoinAvailable.v ? 2 : 1
            )
        }
        .disabled(!isJoinAvailable.v)
      }
      .frame(width: 320)
      .padding()
      .animation(.easeInOut(duration: 0.3))
      .onAppear {
        isJoinAvailable.id = id
        isLoading.id = id
        join.id = id
        textField.id = id
      }
      .onChange(of: id) { newValue in
        isJoinAvailable.id = newValue
        isLoading.id = newValue
        join.id = newValue
        textField.id = newValue
      }
    }
  }
}