import { FC, useEffect, useState } from "react";
import Footer from "../../components/home/footer/Footer";
import InternalPageHeader from "../../components/internalPageHeader/InternalPageHeader";
import styles from "./customerSupport.module.scss";
import * as CategoryAPI from "../api/category";
import { Button, Image } from "antd";
import cx from "classnames";
import  Router  from "next/router";
import _ from "lodash";
import OTPModal from "../../components/modal/otpModal/OTPModal";
import * as CommonApi from "../api/common";
import { baseUrl } from "../../constants/urls";
const CustomerService:FC<any> = ()=>{
    const [category, setCategory] = useState([]);
    const [categoryTree, setCategoryTree] = useState([]);
    const [loginRes, setLoginRes] = useState<any>({});
    const [isOTPModalVisible, setIsOTPModalVisible] = useState(false);
    const [stateArray,setStateArray] = useState([]);
    useEffect(() => {
        const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
        CategoryAPI.fetchCategory().then((res) => {
          setCategory(res);
        });
        CategoryAPI.fetchCategoryTree().then((res) => {
          setCategoryTree(res.categories);
        });
        CommonApi.getRequest(`${baseUrl}/api/indian-states`).then((res)=>{
          setStateArray(res?.data)
        })
    },[]);

    const redirectNavigate=()=>{
        if (_.isEmpty(loginRes)) {
			setIsOTPModalVisible(true);
		} else {
			Router.push("/customerSupport/customerOrder");
		}
    }
    return (
        <>
        <InternalPageHeader  catagories={category}
          categoryTree={categoryTree} stateArray={stateArray}/>
            <div className="container">
                <div className={cx("pt-6 pb-10")}>
                    <h2 className={styles.title}>Customer Service</h2>
                    <div className="ant-row align-center justify-center">
                        <div className={cx("ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12 px-4 ", styles.leftButton)}>
                        <Button className={styles.buttonCustomer} icon={<Image src={"/images/Call-icon.svg"} alt="call"  width={25} height={25}/>} onClick={redirectNavigate}> Request Call Back</Button>
                        </div>
                        <div className={cx("ant-col ant-col-xs-24 ant-col-md-12 ant-col-xl-12  px-4 align-center justify-center", styles.rightButton)}>
                        <Button className={styles.buttonCustomer}icon={<Image src={"/images/Chat-icon.svg"} alt="msg"  width={25} height={25}/>}>Chat with us</Button>
                        </div>
                        
                    </div>
                </div>

            </div>
        <Footer/>
        <OTPModal
				handleOTPClose={() => {
					setIsOTPModalVisible(false);
				}}
				page={"customer"}
				isOTPModalVisible={isOTPModalVisible}
        stateArray={stateArray}
			/>
        </>
    )
}


export default CustomerService;