//
//  ServiceCenterView.swift
//  SodaLive
//
//  Created by klaus on 2023/08/11.
//

import SwiftUI

struct ServiceCenterView: View {
    
    @ObservedObject var viewModel = ServiceCenterViewModel()
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            VStack(spacing: 0) {
                DetailNavigationBar(title: "고객센터")
                
                ScrollView(.vertical, showsIndicators: false) {
                    VStack(spacing: 0) {
                        Image("ic_logo")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 106.7, height: 106.7, alignment: .top)
                        
                        Text("고객센터")
                            .font(.custom(Font.bold.rawValue, size: 20))
                            .foregroundColor(Color(hex: "eeeeee"))
                        
                        HStack(spacing: 13.3) {
                            Image("ic_service_center_kakao")
                                .resizable()
                                .scaledToFill()
                                .frame(width: 21, height: 18.8, alignment: .top)
                            
                            Text("TALK 문의")
                                .font(.custom(Font.bold.rawValue, size: 13.3))
                                .foregroundColor(.black)
                        }
                        .padding(.vertical, 14)
                        .frame(width: screenSize().width - 26.7)
                        .background(Color(hex: "ffe368"))
                        .cornerRadius(8)
                        .padding(.top, 20)
                        .onTapGesture {
                            UIApplication.shared.open(URL(string: "http://pf.kakao.com/_lkxgxhG/chat")!)
                        }
                        
                        Rectangle()
                            .frame(width: screenSize().width, height: 6.7)
                            .foregroundColor(Color(hex: "232323"))
                            .padding(.vertical, 20)
                        
                        Text("자주 묻는 질문")
                            .font(.custom(Font.bold.rawValue, size: 18.3))
                            .foregroundColor(Color(hex: "eeeeee"))
                            .frame(width: screenSize().width - 26.7, alignment: .leading)
                        
                        ServiceCenterCategoryView(
                            categories: viewModel.categories,
                            selectedCategory: $viewModel.selectedCategory
                        )
                        .padding(.vertical, 20)
                        
                        FaqView(faqs: viewModel.faqs)
                    }
                }
            }
        }
        .popup(isPresented: $viewModel.isShowPopup, type: .toast, position: .top, autohideIn: 2) {
            GeometryReader { geo in
                HStack {
                    Spacer()
                    Text(viewModel.errorMessage)
                        .padding(.vertical, 13.3)
                        .padding(.horizontal, 6.7)
                        .frame(width: geo.size.width - 66.7, alignment: .center)
                        .font(.custom(Font.medium.rawValue, size: 12))
                        .background(Color(hex: "9970ff"))
                        .foregroundColor(Color.white)
                        .multilineTextAlignment(.leading)
                        .fixedSize(horizontal: false, vertical: true)
                        .cornerRadius(20)
                        .padding(.top, 66.7)
                    Spacer()
                }
            }
        }
        .onAppear {
            viewModel.getFaqCategories()
        }
    }
}

struct ServiceCenterView_Previews: PreviewProvider {
    static var previews: some View {
        ServiceCenterView()
    }
}