import _ from "lodash";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import CustomerHomePage from "../../components/customer/customerHomePage/CustomerHomePage";
import Footer from "../../components/home/footer/Footer";
import Logo from "../../components/home/logo/Logo";
import MediaQuery from "react-responsive";
import MobileHeader from "../../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../../components/home/mobile/mobileFooter/MobileFooter";
import * as commonAPI from "../api/common";
import { baseUrl } from "../../constants/urls";
import SEOHead from "../../components/SEOHead";
import { seoDataMap } from "../../mockData/seoData";
const seoData = seoDataMap['customerLogin'];
export default function Login(props: any) {
    const router: any = useRouter();
    const [stateArray, setStateArray] = useState([]);
    useEffect(() => {

        commonAPI.getRequest(`${baseUrl}/api/indian-states`).then((res) => {
            setStateArray(res?.data)
            // console.log(res,"res")
        })
        const val: any = localStorage.getItem("loginDetails");
        const details = JSON.parse(val);
        if (!_.isEmpty(details)) {
            router.push("/home");
        }
    }, [router])

    return (
        <>
            <SEOHead {...seoData} />
            <MediaQuery minWidth={768}>
                <div className="container pb-4">
                    <Logo />
                </div>
            </MediaQuery>
            <MediaQuery maxWidth={768}>
                <MobileHeader stateArray={stateArray} />
            </MediaQuery>

            <CustomerHomePage stateArray={stateArray} />
            <Footer stateArray={stateArray} />
            <MediaQuery maxWidth={768}>
                <MobileFooter stateArray={stateArray} />
            </MediaQuery>
        </>
    )
}