//
//  SelectAcademyView.swift
//  AcaMate
//
//  Created by TAnine on 2/18/25.
//

import SwiftUI

struct SelectAcademyView: View {
    @EnvironmentObject var appVM: AppViewModel
    @StateObject var saVM: SelectAcademyViewModel
    
    init(_ appVM: AppViewModel) {
        _saVM = StateObject(wrappedValue: SelectAcademyViewModel(appVM))
    }
    
    @State private var scrollOffset: CGPoint = .zero

    
    var body: some View {
        VStack(spacing: 0) {
            Spacer()
                .frame(maxHeight: 100)
            Image(.Logo.appIcon)
                .resizable()
                .frame(width: 200, height: 200)
            
            VStack(spacing: 4) {
                HStack(spacing: 0){
                    Text("학원 코드")
                        .font(.nps(font: .bold, size: 16))
                        .foregroundStyle(Color(.Text.detail))
                    Spacer(minLength: 1)
                }
                //MARK: TO-DO
                // 문제
                // 1. txf 클릭시 겉 뷰가 작아지는 현상
                // 2. 코드 입력시 버튼 나타나게 하기
                CustomTextField(placeholder: "학원 코드 입력", text: $saVM.academyCode)
                    .frame(maxWidth: .infinity,maxHeight: 48)
                    .padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))
                    .background {
                        RoundedRectangle(cornerRadius: 24)
                            .foregroundStyle(Color(.Normal.light))
                    }
            }
                .padding(EdgeInsets(top: 12, leading: 24, bottom: 40, trailing: 24))
            
            VStack(spacing: 4) {
                HStack(spacing: 0){
                    Text("학원 목록")
                        .font(.nps(font: .bold, size: 16))
                        .foregroundStyle(Color(.Text.detail))
                    Spacer(minLength: 1)
                }
                .padding(EdgeInsets(top: 12, leading: 24, bottom: 0, trailing: 24))
                OffsetObservableScrollView(showsIndicators: false, scrollOffset: $scrollOffset) { proxy in
                    VStack(spacing: 12) {
                        ForEach(Array(saVM.academyList.enumerated()), id: \.offset) { index, academy in
                            AcademyCell(numbering: index, academy: saVM.academyList[index],selectNum: $saVM.selectNum){
                                saVM.toggleSelection(for: index)
                            }
                        }
                    }
                    .padding(EdgeInsets(top: 0, leading: 24, bottom: 12, trailing: 24))
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            
            Spacer(minLength: 1)
            
            Button {
                appVM.naviState.set(act: .MOVE, path: .Main)
            } label: {
                ZStack {
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color(.Second.normal))
                    Text("입장하기")
                        .font(.nps(size: 16))
                        .foregroundStyle(Color(.Normal.light))
                }
                .frame(height: 56)
            }
            .opacity(saVM.selectNum >= 0 ? 1 : 0)
            .padding(EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24))
            
        }
        .onAppear {
            saVM.loadAcademy()
        }
    }
}

struct AcademyCell: View {
    let numbering: Int
    let academy: AcademyName
    @Binding var selectNum: Int
    let action: VOID_TO_VOID
    
    var body: some View {
        HStack(alignment: .center, spacing: 0) {
            Image(.Logo.pageIcon)
                .resizable()
                .frame(width: 32, height: 32, alignment: .center)
                .padding(12)
            Spacer(minLength: 1)
            
            Text("\(academy.name)")
                .font(.nps(size: 18))
                .foregroundStyle(Color(.Text.detail))
                .multilineStyle(.center)
            
            Spacer(minLength: 1)
            
            Button{
//                saVM.toggleSelection(for: numbering)
                action()
            } label: {
                Circle()
                    .stroke(Color(.Text.detail), lineWidth: 4)
                    .fill (selectNum == numbering ? Color(.Point.normal) : Color(.Normal.normal))
                    .frame(width: 18, height: 18)
            }
            .frame(width: 32, height: 32)
            .padding(12)
        }
        .frame(maxWidth: .infinity)
        .background {
            RoundedRectangle(cornerRadius: 12)
                .stroke(Color(.Second.normal), lineWidth: 2)
        }
        .onTapGesture {
            action()
        }
        
        
    }
}