//
//  LoginView.swift
//  AcaMate
//
//  Created by Sean Kim on 12/1/24.
//

import SwiftUI
import Combine


struct LoginView: View {
    @EnvironmentObject var appVM: AppViewModel
    @StateObject var loginVM: LoginViewModel
    
    init(_ appVM: AppViewModel) {
        _loginVM = StateObject(wrappedValue: LoginViewModel(appVM))
    }
    
    
    var body: some View {
        VStack(spacing: 0) {
            Spacer().frame(height: 100)
            Image(.Logo.crystalIcon)
                .resizable()
                .frame(width: 200, height: 200)
            //                .padding(.top, 80)
                .padding(.bottom, 84)
            
            /// 앱 아이콘 이미지
            VStack(spacing: 16) {
                Button {
                    // MARK: - TODO, 카카오 계정 로그인 구현
//                    loginVM.toggleLoading = true
                    loginVM.loginAction(type: .Kakao)
                    
                } label: {
                    makeButton(image: Image(.Logo.kakaoIcon),color: Color(.Other.yellow), "카카오 계정으로 시작하기")
                }
                
                Button {
                    // MARK: - TODO, 애플 계정 로그인 구현
//                    appVM.naviState.set(act: .ADD, path: .SelectAcademy(bids: ["AA0000", "AA0001"]))
//                    loginVM.toggleLoading = true
//                    loginVM.loginTest(type: .Kakao, id: "TestSNSID1@#")
//                    loginVM.USERPAITEST()

                    
                } label: {
                    makeButton(image: Image(.Logo.appleIcon), color: Color(.Text.black), "애플 계정으로 시작하기")
                }
                
                CustomTxfView(placeholder: "id",
                              text: $loginVM.devId,
                              alignment: .center,
                              font: .nps(size: 12))
                .frame(maxWidth: .infinity,maxHeight: 48)
                .padding(EdgeInsets(top: 4, leading: 8, bottom: 4, trailing: 8))
                .background {
                    RoundedRectangle(cornerRadius: 24)
                        .foregroundStyle(Color(.Normal.light))
                }
                Button {
//                    loginVM.toggleLoading = true
                    loginVM.loginAction(type: .Dev)
                    
                } label: {
                    makeButton(image: Image(.Logo.logo),
                               color: Color(.Text.black), "계정으로 시작하기")
                }
            }
            .padding([.leading,.trailing], 28)
            
            Spacer(minLength: 1)
            
        }
        .frame(maxWidth: .infinity,maxHeight: .infinity)
        .fullDrawView(.Normal.normal)
        .onAppear() {
            
        }
        
//        .onChange(of: loginVM.pathName){ _, new in
//            appVM.naviState.set(act: .ADD, path: new)
//        }
//        
//        .onChange(of: loginVM.toggleLoading) { _, new in
//            appVM.isLoading = new
//        }
        
    }
    
    func makeButton(image: Image, color: Color? = nil, _ body: String) -> some View {
        return HStack {
            image
                .resizable()
                .frame(width: 32, height: 32)
            Spacer(minLength: 12)
            Text("\(body)")
                .font(.nps(font: .regular, size: 16))
                .foregroundStyle(color == Color(.Text.black) ? Color(.Text.white) : Color(.Text.black))
            Spacer(minLength: 12)
        }
        .padding(12)
        .background {
            if let color = color {
                RoundedRectangle(cornerRadius: 12)
                    .foregroundStyle(color)
            }
        }
    }
}