//
//  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
    @State private var isLoading = false
    
    @State private var isSelectAddr: Bool = false
    
    @StateObject private var dropdownManager = DropdownManager()
    
    private let addressBtnID = UUID()
    private let registerBtnID = UUID()
    
    @State private var selected = ""
    let options = ["Swift", "Kotlin", "Dart", "JavaScript", "C#","C++","C"]
    
    var body: some View {
        // MARK: TO-DO
        // 회원가입 뷰 만들기
        // 이름, 번호, 이메일, 주소, 생년월일
        ZStack {
            VStack(spacing: 0) {
                TopView(topVM: topVM)
                HStack(spacing: 0) {
                    Spacer(minLength: 1)
                    Text("*")
                        .font(.nps(size: 12))
                        .foregroundStyle(Color(.Other.red))
                    Text("는 필수 입력 사항입니다.")
                        .font(.nps(size: 12))
                }
                .padding(EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 16))
                
                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: .center)
                        .padding(.trailing,12)
                        Spacer(minLength: 1)
                        CustomTextField(placeholder: "최대 10글자 입력", text: $registerVM.nameText, alignment: .center)
                            .frame(maxWidth: .infinity,maxHeight: 48)
                            .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                            .background {
                                RoundedRectangle(cornerRadius: 24)
                                    .foregroundStyle(Color(.Normal.light))
                            }
                    }
                    .padding(EdgeInsets(top: 8, leading: 16, bottom: 16, trailing: 16))
                    
                    // 생년월일
                    HStack(spacing: 0){
                        Text("생일")
                            .font(.nps(size: 16))
                            .frame(width: 60, alignment: .center)
                            .padding(.trailing,12)
                        Spacer(minLength: 1)
                        DatePicker("", selection: $registerVM.selectDate, displayedComponents: [.date])
                            .datePickerStyle(.compact)
                            .environment(\.locale, Locale(identifier: "ko_KR"))
                            .font(.nps(size: 16))
                    }
                    .padding()
                    
                    // E-Mail
                    HStack(spacing: 0){
                        HStack(spacing: 0) {
                            Text("이메일")
                                .font(.nps(size: 16))
                            Text("*")
                                .font(.nps(size: 16))
                                .foregroundStyle(Color(.Other.red))
                        }
                        .frame(width: 60, alignment: .center)
                        .padding(.trailing,12)
                        Spacer(minLength: 1)
                        CustomTextField(placeholder: "앞부분 입력", text: $registerVM.emailFrontText, alignment: .center)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                            .background {
                                RoundedRectangle(cornerRadius: 24)
                                    .foregroundStyle(Color(.Normal.light))
                            }
                        //                    Spacer(minLength: 1)
                        Text("@")
                            .font(.nps(size: 16))
                            .padding([.leading, .trailing], 4)
                        //                    Spacer(minLength: 1)
                        
                        DropdownButton(manager: dropdownManager, title: "도메인 선택",
                                       items: registerVM.emailTailList)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background {
                                RoundedRectangle(cornerRadius: 24)
                                    .foregroundStyle(Color(.Normal.light))
                            }
                        
                        // 직접 입력 선택시 나오게 할 부분
                        /*
                        CustomTextField(placeholder: "뒷부분 입력", text: $registerVM.emailFrontText, alignment: .center)
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                            .background {
                                RoundedRectangle(cornerRadius: 24)
                                    .foregroundStyle(Color(.Normal.light))
                            }
                         */
                    }
                    .padding()
                    
                    // Phone
                    HStack(spacing: 0){
                        HStack(spacing: 0) {
                            Text("연락처")
                                .font(.nps(size: 16))
                            Text("*")
                                .font(.nps(size: 16))
                                .foregroundStyle(Color(.Other.red))
                        }
                        .frame(width: 60, alignment: .center)
                        .padding(.trailing,12)
//                        DropdownButton(manager: dropdownManager, title: "선택", items: options)
//                        CustomTextField(placeholder: "000", text: $registerVM.nameText, alignment: .center)
//                            .frame(maxWidth: .infinity,maxHeight: 48)
//                            .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
//                            .background {
//                                RoundedRectangle(cornerRadius: 24)
//                                    .foregroundStyle(Color(.Normal.light))
//                            }
                        DropdownButton(manager: dropdownManager, title: "선택", items: registerVM.numberHeadList)
                            .background {
                                RoundedRectangle(cornerRadius: 24)
                                    .foregroundStyle(Color(.Normal.light))
                            }
                        Text("-")
                            .font(.nps(size: 16))
                            .padding([.leading, .trailing], 4)
                        
                        CustomTextField(placeholder: "0000", text: $registerVM.nameText, alignment: .center)
                            .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, alignment: .center)
                            .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: .center)
                            .padding(.trailing,12)
                        Spacer(minLength: 1)
                        
                        VStack(spacing: 0) {
                            SimpleBtnView(vm: btnVM, id: addressBtnID)
                                .padding(.bottom, isSelectAddr ? 4:0)
                            CustomTextField(placeholder: "상세 주소 입력", text: $registerVM.addrDetailText, alignment: .center)
                                .frame(maxWidth: .infinity,
                                       maxHeight: isSelectAddr ? 48 : 0)
                                .padding(EdgeInsets(top: 4, leading: 20, bottom: 4, trailing: 20))
                                .background {
                                    RoundedRectangle(cornerRadius: 24)
                                        .foregroundStyle(Color(.Normal.light))
                                }
                                .opacity(isSelectAddr ? 1.0 : 0.0)
                        }
                    }
                    .padding()
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                //            .background(Color(.Normal.light))
            }
            GlobalDropdownOverlay(manager: dropdownManager)
        }
        .coordinateSpace(name: "dropdownArea")
        .sheet(isPresented: $showWebView) {
            WebView(url: URL(string: "https://sean-59.github.io/Kakao-Postcode/")!,
                    showWebView: $showWebView,
                    isLoading: $isLoading) { result in
                if let result = result as? (String, String) {
                    print(result.0)
                    isSelectAddr = true
//                    printLog(registerVM.addressText)
                    registerVM.addressText = result.0
                    
                    btnVM.setSize(for: addressBtnID, newWidth: .infinity, newHeight: .infinity)
//                    printLog(registerVM.addressText)
                    btnVM.setText(for: addressBtnID, newText: "\(registerVM.addressText)", newFont: .nps(size: 16))
                }
            }
        }
        .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: "\(registerVM.addressText)", newFont: .nps(size: 16))
            btnVM.setAction(for: addressBtnID) {
                self.showWebView.toggle()
            }
            dropdownManager.font = .nps(size: 16)
        }
        .onChange(of: registerVM.addressText) { _, new in
            
        }
    }
    
    func leftAct() {
        printLog("왼쪽 버튼 클릭")
        appVM.naviState.set(act: .POP)
    }
    func rightAct() {
        printLog("오른쪽 버튼 클릭")
    }
}