//
//  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

    var body: some View {
        VStack{
            VStack(alignment: .leading, spacing: 0) {
                HStack(spacing: 0){
                    Image("account")
                        .resizable()
                        .frame(width: 22, height: 22)
                        .padding(EdgeInsets(top: 14, leading: 8, bottom: 13, trailing: 18))

                    TextField(
                        "",
                        text: $param.shipId,
                        prompt: Text("Ship ID")
                            .font(FontStyle.DefaultText.font)
                            .foregroundColor(ColorSet.BodyDescriptiion.color)                    )
                    .frame(height: 49)
                    .padding(.zero)
                    .autocapitalization(.none)
                }
                
                Divider()
                    .frame(height: 1)
                    .background(ColorSet.LineColor03.color)

                HStack(spacing: 0){
                    Image("password")
                        .resizable()
                        .frame(width: 22, height: 22)
                        .padding(EdgeInsets(top: 14, leading: 8, bottom: 13, trailing: 18))
                    SecureField(
                        "",
                        text: $param.password,
                        prompt: Text("Password")
                            .font(FontStyle.DefaultText.font)
                            .foregroundColor(ColorSet.BodyDescriptiion.color)
                    )
                    .frame(height: 49)
                    .padding(.zero)
                }
                .padding(.top, 16)
                 
                
                Divider()
                    .frame(height: 1)
                    .background(ColorSet.LineColor03.color)
            }
                            
            Button(action: {
                if param.shipId.isEmpty || param.password.isEmpty {
                    isIdPassWordEmpty = true
                } else {
                    viewMode = .InputUserName
                }
            }, label: {
                Text("Sign In")
                    .font(FontStyle.TitleS.font)
                    .frame(height: 60)
                    .frame(maxWidth: .infinity)
                    .foregroundColor(ColorSet.ButtonText.color)
                    .background(ColorSet.LoginBk01.color)
            })
            .alert(isPresented: $isIdPassWordEmpty, content: {
                Alert(title: Text("error"),
                      message: Text("Ship Id or Password not entered.")
                )
            })
            .padding(.top, 40)
        }
        .padding(EdgeInsets(top: 26, leading: 20, bottom: 40, trailing: 20))
        .background(ColorSet.LoginBk02.color)
        .padding(.horizontal, 30)
    }
}

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