//
//  LiveRoomEditView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/14.
//

import SwiftUI

struct LiveRoomEditView: View {
    
    @StateObject var keyboardHandler = KeyboardHandler()
    @StateObject var viewModel = LiveRoomEditViewModel()
    
    @State private var isShowSelectDateView = false
    @State private var isShowSelectTimeView = false
    
    let room: GetRoomDetailResponse
    
    init(room: GetRoomDetailResponse) {
        UITextView.appearance().backgroundColor = .clear
        UIScrollView.appearance().bounces = false
        self.room = room
    }
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            ZStack {
                VStack(spacing: 0) {
                    DetailNavigationBar(title: "라이브 수정")
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(spacing: 0) {
                            TitleInputView()
                                .frame(width: screenSize().width - 26.7)
                                .padding(.top, 33.3)
                            
                            ContentInputView()
                                .frame(width: screenSize().width - 26.7)
                                .padding(.top, 33.3)
                            
                            ReservationDateTimeView(buttonWidth: (screenSize().width - 40) / 2)
                                .padding(.top, 22.7)
                            
                            NumberOfPeopleLimitView()
                                .frame(width: screenSize().width - 26.7)
                                .padding(.top, 33.3)
                            
                            if !viewModel.isLoading {
                                Text("라이브 수정")
                                    .font(.custom(Font.bold.rawValue, size: 18.3))
                                    .foregroundColor(Color.white)
                                    .frame(width: screenSize().width - 26.7, height: 50)
                                    .background(Color(hex: "9970ff"))
                                    .cornerRadius(10)
                                    .padding(.top, 30)
                                    .onTapGesture {
                                        viewModel.updateLiveRoom()
                                    }
                            }
                            
                            Rectangle()
                                .foregroundColor(Color(hex: "222222"))
                                .frame(width: screenSize().width, height: keyboardHandler.keyboardHeight)
                        }
                    }
                }
                
                if isShowSelectDateView {
                    SelectDateView()
                }
                
                if isShowSelectTimeView {
                    SelectTimeView()
                }
            }
            .onTapGesture {
                hideKeyboard()
            }
            .edgesIgnoringSafeArea(.bottom)
        }
        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
            GeometryReader { geo in
                HStack {
                    Spacer()
                    Text(viewModel.errorMessage)
                        .padding(.vertical, 13.3)
                        .frame(width: geo.size.width - 66.7, alignment: .center)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .background(Color(hex: "9970ff"))
                        .foregroundColor(Color.white)
                        .multilineTextAlignment(.center)
                        .cornerRadius(20)
                        .padding(.top, 66.7)
                    Spacer()
                }
            }
        }
        .onAppear {
            viewModel.room = room
        }
    }
    
    @ViewBuilder
    func TitleInputView() -> some View {
        VStack(spacing: 0) {
            Text("제목")
                .font(.custom(Font.bold.rawValue, size: 16.7))
                .foregroundColor(Color(hex: "eeeeee"))
                .padding(.horizontal, 13.3)
                .frame(width: screenSize().width, alignment: .leading)
            
            TextField("라이브 제목을 입력하세요", text: $viewModel.title)
                .autocapitalization(.none)
                .disableAutocorrection(true)
                .font(.custom(Font.medium.rawValue, size: 13.3))
                .foregroundColor(Color(hex: "eeeeee"))
                .accentColor(Color(hex: "9970ff"))
                .keyboardType(.default)
                .padding(.top, 12)
                .padding(.horizontal, 6.7)
            
            Rectangle()
                .frame(height: 1)
                .foregroundColor(Color(hex: "909090").opacity(0.7))
                .padding(.top, 8.3)
        }
    }
    
    @ViewBuilder
    func ContentInputView() -> some View {
        VStack(spacing: 13.3) {
            HStack(spacing: 0) {
                Text("공지")
                    .font(.custom(Font.bold.rawValue, size: 16.7))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Spacer()
                
                Text("\(viewModel.notice.count)자")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "ff5c49")) +
                Text(" / 1000자")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "777777"))
            }
            
            TextViewWrapper(
                text: $viewModel.notice,
                placeholder: viewModel.placeholder,
                textColorHex: "eeeeee",
                backgroundColorHex: "222222"
            )
            .frame(width: screenSize().width - 26.7, height: 133.3)
            .cornerRadius(6.7)
            .padding(.top, 13.3)
        }
    }
    
    @ViewBuilder
    func ReservationDateTimeView(buttonWidth: CGFloat) -> some View {
        HStack(spacing: 13.3) {
            VStack(alignment: .leading, spacing: 6.7) {
                Text("예약 날짜")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Button(action: {
                    hideKeyboard()
                    self.isShowSelectDateView = true
                }) {
                    Text(viewModel.reservationDateString)
                        .font(.custom(Font.medium.rawValue, size: 14.7))
                        .foregroundColor(Color(hex: "eeeeee"))
                        .frame(width: buttonWidth, height: 48.7)
                        .overlay(
                            RoundedRectangle(cornerRadius: 6.7)
                                .stroke(Color(hex: "9970ff"), lineWidth: 1.3)
                        )
                }
            }
            
            VStack(alignment: .leading, spacing: 6.7) {
                Text("예약 시간")
                    .font(.custom(Font.medium.rawValue, size: 13.3))
                    .foregroundColor(Color(hex: "eeeeee"))
                
                Button(action: {
                    hideKeyboard()
                    self.isShowSelectTimeView = true
                }) {
                    Text(viewModel.reservationTimeString)
                        .font(.custom(Font.medium.rawValue, size: 14.7))
                        .foregroundColor(Color(hex: "eeeeee"))
                        .frame(width: buttonWidth, height: 48.7)
                        .overlay(
                            RoundedRectangle(cornerRadius: 6.7)
                                .stroke(Color(hex: "9970ff"), lineWidth: 1.3)
                        )
                }
            }
        }
        .frame(width: screenSize().width)
        .padding(.vertical, 13.3)
        .background(Color(hex: "222222"))
    }
    
    @ViewBuilder
    func NumberOfPeopleLimitView() -> some View {
        VStack(spacing: 13.3) {
            Text("참여인원 설정")
                .font(.custom(Font.bold.rawValue, size: 16.7))
                .foregroundColor(Color(hex: "eeeeee"))
                .frame(width: screenSize().width - 26.7, alignment: .leading)
            
            TextField("최대 인원 999명", text: $viewModel.numberOfPeople)
                .autocapitalization(.none)
                .disableAutocorrection(true)
                .multilineTextAlignment(.center)
                .font(.custom(Font.medium.rawValue, size: 14.7))
                .foregroundColor(Color(hex: "eeeeee"))
                .accentColor(Color(hex: "9970ff"))
                .keyboardType(.numberPad)
                .padding(.vertical, 15.7)
                .frame(width: screenSize().width - 26.7, alignment: .center)
                .background(Color(hex: "222222"))
                .cornerRadius(6.7)
        }
    }
    
    @ViewBuilder
    func SelectDateView() -> some View {
        GeometryReader { proxy in
            ZStack {
                Color
                    .black
                    .opacity(0.5)
                    .edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 0) {
                    DatePicker("", selection: $viewModel.reservationDate, in: Date()..., displayedComponents: .date)
                        .datePickerStyle(WheelDatePickerStyle())
                        .labelsHidden()
                        .environment(\.locale, Locale.init(identifier: "ko"))
                        .frame(width: proxy.size.width)
                    
                    Button(action: { self.isShowSelectDateView = false }) {
                        Text("확인")
                            .font(.system(size: 16))
                            .foregroundColor(Color(hex: "eeeeee"))
                            .padding(.vertical, 10)
                            .frame(width: proxy.size.width - 53.4)
                    }
                }
                .background(Color(hex: "222222"))
                .cornerRadius(6.7)
            }
            .frame(width: proxy.size.width)
        }
    }
    
    @ViewBuilder
    func SelectTimeView() -> some View {
        GeometryReader { proxy in
            ZStack {
                Color
                    .black
                    .opacity(0.5)
                    .edgesIgnoringSafeArea(.all)
                
                VStack(spacing: 0) {
                    DatePicker("", selection: $viewModel.reservationTime, displayedComponents: .hourAndMinute)
                        .datePickerStyle(WheelDatePickerStyle())
                        .labelsHidden()
                        .environment(\.locale, Locale.init(identifier: "ko"))
                        .frame(width: proxy.size.width - 53.4)
                    
                    Button(action: { self.isShowSelectTimeView = false }) {
                        Text("확인")
                            .font(.system(size: 16))
                            .foregroundColor(Color(hex: "eeeeee"))
                            .padding(.vertical, 10)
                            .frame(width: proxy.size.width)
                    }
                }
                .background(Color(hex: "222222"))
                .cornerRadius(6.7)
            }
            .frame(width: proxy.size.width)
        }
    }
}