// material-ui
import {
    Box,
    Grid, Typography
} from '@mui/material';
import ClientForm from "./ClientForm";
import {useContext, useEffect, useState} from "react";
import * as React from "react";
import axios from "axios";
import {apiPath} from "../../../auth/utils";
import {
    GET_CLIENT_PATH,
} from "../../../utils/ApiPathConst";
import LoadingComponent from "../../extra-pages/LoadingComponent";
import {useLocation, useParams} from "react-router-dom";
import ApplicationTable from "./ApplicationTable";
import MainCard from "../../../components/MainCard";
import AbilityContext from "../../../components/AbilityProvider";

import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";
import {isObjEmpty} from "../../../utils/Utils";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ClientPanel = () => {
    const params = useParams();
    const ability = useContext(AbilityContext);
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const refId = queryParams.get("refId");

    const [onReady, setOnReady] = useState(false);
    const [isNewRecord, setIsNewRecord] = useState(false);
    const [clientDetail, setClientDetail] = useState({});

    //const [tagCombo, setTagCombo] = useState({});

    // function updateApplicationDetail(applicationData) {
    //     setApplicationDetail(applicationData);
    // }

    useEffect(() => {
        // getReminderInterval();
        // getReminderBefore();
        // getReminderLimit();
        // getReminderLimitMax();
        if(refId !== null){
            setIsNewRecord(false);
            getClientDetail(refId);
        }
        else if(params.id<0){
            setIsNewRecord(true);
        }
        else{
            setIsNewRecord(false);
            getClientDetail(params.id);
        }
        // getGroupList();
        // getApplicationList();
    }, [refId, params.id]);

    // function getReminderBefore(){
    //     axios.get(`${apiPath}${GET_REMINDER_BEFORE}`,
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setReminderBefore(response.data.data);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    // function getReminderLimit(){
    //     axios.get(`${apiPath}${GET_REMINDER_LIMIT}`,
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setReminderLimit(response.data.data);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    // function getReminderLimitMax(){
    //     axios.get(`${apiPath}${GET_REMINDER_LIMIT_MAX}`,
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setReminderLimitMax(response.data.data);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    useEffect(() => {
        if(isNewRecord || Object.keys(clientDetail).length > 0) {
            setOnReady(true);
        }
    }, [isNewRecord, clientDetail]);

    // function getApplicationList(){
    //     const byDivision = {
    //         clientId: params.id,
    //         userSubDivisionId: ability.can('VIEW', 'ALL_RECORD') ? null : localStorage.getItem('subDivisionId'),
    //     }
    //     axios.get(`${apiPath}${GET_EVENT_APPLICATION_PATH}`,
    //         {
    //             params: byDivision,
    //         }
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setApplicationList(response.data.records);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    // function getReminderInterval(){
    //     axios.get(`${apiPath}${GET_REMINDER_INTERVAL}`,
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setReminderInterval(response.data.data);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    function getClientDetail(clientId) {
        axios.get(`${apiPath}${GET_CLIENT_PATH}/${clientId}`,
        )
            .then((response) => {
                if (response.status === 200) {
                    setClientDetail(response.data.data);
                    // setRefSubDivisionList(response.data.clientDivision);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    // function getGroupList() {
    //     axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`,
    //     )
    //         .then((response) => {
    //             if (response.status === 200) {
    //                 setSubDivisionCombo(response.data.records);
    //             }
    //         })
    //         .catch(error => {
    //             console.log(error);
    //             return false;
    //         });
    // }

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <Grid container rowSpacing={3} columnSpacing={2.75} >
                <ThemeProvider theme={LIONER_FORM_THEME}>
                <Grid item xs={12} s={12} md={12} lg={12}>
                    <Grid container justifyContent="flex-start" alignItems="center">
                        <Grid item xs={3} sx={{mt:-1, mb: -2.25}} >
                            <Box sx={{ display: 'flex', alignItems: 'center'}}>
                                <Typography align="center" variant="h4" >{isNewRecord? "New Client" : "Maintain Client"}</Typography>
                            </Box>
                        </Grid>
                    </Grid>
                </Grid>

                {/*row 1*/}
                <Grid item xs={12} md={12} lg={12} >
                    <ClientForm
                        getClientDetail={getClientDetail}
                        refClientDetail={clientDetail}
                        isNewRecord={isNewRecord}
                    />
                </Grid>
                </ThemeProvider>
            </Grid>

    );
};

export default ClientPanel;
