//
//  InputIdPassWordView.swift
//  forShip
//
//  Created by Mamoru Sugita on 2023/10/13.
//

import SwiftUI
import Combine

struct InputIdPassWordView: View {
    @Binding var viewMode : LoginViewMode
    @Binding var param : LoginViewParam
    @State private var isUserNmaeEmpty = false
    @State private var isIdPassWordEmpty = false

    let itemHPadding: Double = 16
    let dialogBottomPadding: Double = 32
    let textFieldHeight: Double = 49
    let inputAreaHeight: Double = 150
    let dialogHeight: CGFloat = 250
    var body: some View {
        VStack{
            VStack {
                HStack{
                    Image("account")
                        .frame(width: 22, height: 22)
                        .padding(.horizontal, 8)
                        .accentColor(.white)
                        .foregroundColor(.white)
                    
                    TextField(
                        "",
                        text: $param.shipId,
                        prompt: Text("Ship ID")
                        .foregroundColor(.white)
                    )
                    .frame(height: textFieldHeight)
                    .padding(.trailing)
                    .foregroundColor(.white)
                    .background(.lineColor01)
                    .autocapitalization(.none)
                    .modifier(TextFieldModifier(text: $param.shipId, inputType: .UserId))
                    
                }
                
                Divider()
                    .frame(height: 1)
                    .background(Color(.white))
                
                Spacer()
                    .frame(height: 16)
                
                HStack{
                    Image("password")
                        .padding(.horizontal, 4)
                        .foregroundColor(.white)
                    SecureField(
                        "",
                        text: $param.password,
                        prompt: Text("Password")
                        .foregroundColor(.white)
                    )
                    .frame(height: textFieldHeight)
                    .padding(.trailing)
                    .foregroundColor(.white)
                }
                 
                
                Divider()
                    .frame(height: 1)
                    .background(Color(.white))
            }
            
            Spacer()
                .frame(height: 40)
                
            Button(action: {
                if param.shipId.isEmpty || param.password.isEmpty {
                    isIdPassWordEmpty = true
                } else {
                    viewMode = .InputUserName
                }
            }, label: {
                Text("Sign In")
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .foregroundColor(.buttonText)
                    .background(.primaryActiveIcon)
            })
            .alert(isPresented: $isIdPassWordEmpty, content: {
                Alert(title: Text("error"),
                      message: Text("Ship Id or Password not entered.")
                )
            })
        }
        .padding(EdgeInsets(top: 26, leading: 20, bottom: 40, trailing: 20))
        .background(ColorSet.BackgroundSecondary.color)
        .padding(.horizontal, 30)
    }
}

#Preview {
    InputIdPassWordView(viewMode: .constant(.InputIdPassword), param: .constant(LoginViewParam()))
}
