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

import SwiftUI
import Combine

struct InputIdPassWordView: View {
    @EnvironmentObject var loginViewParam: LoginViewParam
//    @ObservedObject var loginViewParam: LoginViewParam = LoginViewParam()
    let itemHPadding: Double = 16
    let dialogBottomPadding: Double = 32
    let textFieldHeight: Double = 49
    let inputAreaHeight: Double = 150
    let dialogHeight: CGFloat = 250
    var body: some View {
        
    
        HStack {
            VStack{
                VStack {
                    HStack{
                        Image("account")
                            .frame(width: 22, height: 22)
                            .padding(.horizontal, 8)
                            .accentColor(.white)
                            .foregroundColor(.white)
                        
                        TextField(
                            "",
                            text: $loginViewParam.shipId,
                            prompt: Text("Ship ID")
                            .foregroundColor(.white)
                        )
                        .frame(height: textFieldHeight)
                        .padding(.trailing)
                        .foregroundColor(.white)
                        .background(.lineColor01)
                        .modifier(TextFieldModifier(text: $loginViewParam.shipId, inputType: .UserId))
                        
                    }
                    
                    
                    
                    Divider()
                        .frame(height: 1)
                        .background(Color(.white))
                    
                    Spacer()
                        .frame(height: 16)
                    
                    HStack{
                        Image("password")
                            .padding(.horizontal, 4)
                            .foregroundColor(.white)
                        SecureField(
                            "",
                            text: $loginViewParam.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: {
                    loginViewParam.viewMode = .InputUserName
                }, label: {
                    Text("Sign In")
                        .frame(height: 60)
                        .frame(maxWidth: .infinity)
                        .foregroundColor(.buttonText)
                        .background(.primaryActiveIcon)
                })
            }
            .padding(EdgeInsets(top: 26, leading: 20, bottom: 40, trailing: 20))
        }
        .background(ColorSet.BackgroundSecondary.color)
        .padding(.horizontal, 30)
    }
}

#Preview {
    InputIdPassWordView()
}
