//
//  RegisterView.swift
//  AcaMate
//
//  Created by TAnine on 2/20/25.
//

import SwiftUI

struct RegisterView: View {
    @EnvironmentObject var appVM: AppViewModel
    @StateObject private var topVM = TopViewModel()
    @StateObject var btnVM = ButtonViewModel()
    @StateObject var registerVM: RegisterViewModel
    
    private let responseValue: (SNSLoginType, String)
    
    init(_ appVM: AppViewModel, type: SNSLoginType, snsID: String) {
        _registerVM = StateObject(wrappedValue: RegisterViewModel(appVM))
        self.responseValue.0 = type
        self.responseValue.1 = snsID
    }
    
    
    @State private var scrollOffset: CGPoint = .zero
    @State private var showWebView = false
    
    
    
    let addressBtnID = UUID()
    let registerBtnID = UUID()
    
    
    var body: some View {
        // MARK: TO-DO
        // 회원가입 뷰 만들기
        // 이름, 번호, 이메일, 주소, 생년월일
        VStack(spacing: 0) {
            TopView(topVM: topVM)
            
            OffsetObservableScrollView(showsIndicators: false, scrollOffset: $scrollOffset) { proxy in
                
                // 이름
                HStack(spacing: 0){
                    HStack(spacing: 0) {
                        Text("이름")
                            .font(.nps(size: 16))
                        Text("*")
                            .font(.nps(size: 16))
                            .foregroundStyle(Color(.Other.red))
                    }
                    .frame(width: 60, alignment: .leading)
                    Spacer(minLength: 1)
                    CustomTextField(placeholder: "최대 10글자", text: $registerVM.nameText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                }
                .padding()
                
                // 생년월일
                DatePicker("생일", selection: $registerVM.selectDate, displayedComponents: [.date])
                    .datePickerStyle(.compact)
                    .environment(\.locale, Locale(identifier: "ko_KR"))
                    .font(.nps(size: 16))
                    .padding()
                
                // E-Mail
                HStack(spacing: 0){
                    Text("이메일")
                        .font(.nps(size: 16))
                        .frame(width: 60, alignment: .leading)
                    Spacer(minLength: 1)
                    CustomTextField(placeholder: "앞부분 입력", text: $registerVM.emailFrontText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                    //                    Spacer(minLength: 1)
                    Text("@")
                        .font(.nps(font: .bold, size: 16))
                        .padding([.leading, .trailing], 4)
                    //                    Spacer(minLength: 1)
                    CustomTextField(placeholder: "뒷부분 입력", text: $registerVM.emailTailText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                }
                .padding()
                
                // Phone
                HStack(spacing: 0){
                    Text("연락처")
                        .font(.nps(size: 16))
                        .frame(width: 60, alignment: .leading)
                    
                    CustomTextField(placeholder: "000", text: $registerVM.nameText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                    Text("-")
                        .font(.nps(size: 16))
                        .padding([.leading, .trailing], 4)
                    CustomTextField(placeholder: "0000", text: $registerVM.nameText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                    Text("-")
                        .font(.nps(size: 16))
                        .padding([.leading, .trailing], 4)
                    CustomTextField(placeholder: "0000", text: $registerVM.nameText)
                        .frame(maxWidth: .infinity,maxHeight: 48)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                        .background {
                            RoundedRectangle(cornerRadius: 24)
                                .foregroundStyle(Color(.Normal.light))
                        }
                }
                .padding()
                
                HStack(spacing: 0){
                    Text("연락처")
                        .font(.nps(size: 16))
                        .frame(width: 60, alignment: .leading)
                    Spacer(minLength: 1)
                    SimpleBtnView(vm: btnVM, id: addressBtnID)
                        .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                    
                }
                .padding()
                
                // address
                
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .sheet(isPresented: $showWebView) {
                WebView(isLoding: $showWebView)
                    .edgesIgnoringSafeArea(.all)
            }
            
        }
        .onAppear {
            topVM.titleName = "회원가입"
            topVM.setLeftBtn(Image(.Icon.left), size: CGPoint(x: 40, y: 40), action: leftAct)
            topVM.setRightBtn(size: CGPoint(x: 40, y: 40), action: rightAct)
            
            btnVM.setSize(for: addressBtnID, newWidth: 80, newHeight: 24)
            btnVM.setText(for: addressBtnID, newText: "주소 입력", newFont: .nps(size: 16))
            btnVM.setAction(for: addressBtnID) {
//                self.appVM.isLoading.toggle()
                self.showWebView.toggle()
            }
            
        }
    }
    
    func leftAct() {
        printLog("왼쪽 버튼 클릭")
        appVM.naviState.set(act: .POP)
    }
    func rightAct() {
        printLog("오른쪽 버튼 클릭")
    }
}