// material-ui
import {
    FormControl,
    Button,
    Grid,
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
    Stack
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import * as React from "react";
import { useForm } from "react-hook-form";
import {
    useEffect,
    useState,
    lazy
} from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
//import {useParams} from "react-router-dom";
import ContentPasteSearchIcon from '@mui/icons-material/ContentPasteSearch';
import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
import HighlightOff from '@mui/icons-material/HighlightOff';
import * as DateUtils from "utils/DateUtils";
import { isGrantedAny } from "auth/utils";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ClientDetailCard = (
    { applicationDetailData,
        // isCollectData,
        // updateUserObject,
        // isNewRecord
    }
) => {
    // const params = useParams();
    const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [brExpiryDate, setBrExpiryDate] = useState("");
    const [brNo, setBrNo] = useState("");
    const [onReady, setOnReady] = useState(false);
    const [companyName, setCompanyName] = useState({ enCompanyName: "", chCompanyName: "" });
    const { register,
        // getValues
    } = useForm()
    // const navigate = useNavigate()

    useEffect(() => {
        //if user data from parent are not null
        if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) {
            setCurrentApplicationDetailData(applicationDetailData.userData);
            if (applicationDetailData.orgDetail != null) {
                var orgDetail = applicationDetailData.orgDetail?.data;
                setBrExpiryDate(DateUtils.dateValue(orgDetail?.brExpiryDate));
                setBrNo(orgDetail?.brNo);
                const companyNameData = {
                    enCompanyName: orgDetail?.enCompanyName,
                    chCompanyName: orgDetail?.chCompanyName
                }
                setCompanyName(companyNameData)
            } else {
                var userData = applicationDetailData.userData;
                setBrExpiryDate(DateUtils.dateValue(userData?.brExpiryDate));
                setBrNo(userData?.brNo);
                const companyNameData = {
                    enCompanyName: userData?.enCompanyName,
                    chCompanyName: userData?.chCompanyName
                }
                setCompanyName(companyNameData)
            }
            setOnReady(true);
        }
    }, [applicationDetailData]);

    // useEffect(() => {
    //     //if state data are ready and assign to different field
    //     // console.log(currentApplicationDetailData)
    //     if (Object.keys(currentApplicationDetailData).length > 0) {
    //         if( currentApplicationDetailData.orgId!=null){
    //             if (Object.keys(orgDetailData).length > 0) {
    //                 setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate));
    //                 setBrNo(orgDetailData.brNo);
    //                 setOnReady(true);
    //             }else{
    //                 setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate));
    //                 setBrNo(currentApplicationDetailData.brNo);
    //                 setOnReady(true);
    //             }
    //         }else{
    //             setOnReady(true);
    //         }
    //     }
    // }, [currentApplicationDetailData, orgDetailData]);

    useEffect(() => {
        if (brNo != undefined && brNo.length > 0) {
            // console.log(brExpiryDate)
            var currentDate = new Date();  // Current date
            var targetDate = new Date(brExpiryDate);  // Target date

            if (targetDate < currentDate) {
                alert("The BR is expired.")
            } else {
                var timeDiff = Math.abs(currentDate.getTime() - targetDate.getTime());
                // console.log(timeDiff)
                var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                // console.log(diffDays)
                if (diffDays <= 7 && diffDays > 0) {
                    alert("The BR is expiring.")
                }
            }
            setOnReady(true);
        }
    }, [brNo]);

    const handleViewClick = () => () => {
        // console.log(currentApplicationDetailData)
        currentApplicationDetailData.type == "ORG" ?
            window.open('/orgUser/' + currentApplicationDetailData.id, "_blank", "noreferrer") :
            window.open('/indUser/' + currentApplicationDetailData.id, "_blank", "noreferrer");
        window.addEventListener("focus", onFocus)
    };

    const onFocus = () => {
        window.removeEventListener("focus", onFocus)
        location.reload();
    }

    // useEffect(() => {
    //     //upload latest data to parent
    //     const values = getValues();
    //     const objectData ={
    //         ...values,
    //         locked: locked,
    //     }
    //     updateUserObject(objectData);
    // }, [isCollectData]);

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
                sx={{ xs: "12", md: "7" }}>

                {isGrantedAny(["VIEW_USER", "MAINTAIN_USER", "VIEW_IND_USER", "VIEW_ORG_USER", "MAINTAIN_IND_USER", "MAINTAIN_ORG_USER"]) ?
                    <Grid container spacing={1} direction="row">
                        <Grid item xs={12} md={7} >
                            <Stack
                                direction="row"
                                justifyContent="flex-start"
                                alignItems="center"
                                spacing={2}
                                mb={2}
                            >
                                <Button
                                    // size="large"
                                    variant="contained"
                                    onClick={handleViewClick()}
                                    sx={{
                                        textTransform: 'capitalize',
                                        alignItems: 'end',
                                    }}>
                                    <ContentPasteSearchIcon />
                                    <Typography variant="h5" ml={1} mr={1}> View</Typography>
                                </Button>
                            </Stack>
                        </Grid>
                    </Grid> : <></>
                }


                <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                    Client Details
                </Typography>
                <form>
                    <Grid container direction="column" justifyContent="flex-start"
                        alignItems="flex-start">
                        <Grid item xs={12} md={12} lg={12} mb={1}  >
                            {currentApplicationDetailData.verifiedBy !== null ?
                                <Stack direction="row">
                                    <Typography variant="h5">
                                        Verified
                                    </Typography>
                                    <CheckCircleOutline sx={{ mt: 0.5, ml: 0.2 }} color="success" />
                                </Stack> :
                                <Stack direction="row">
                                    <Typography variant="h5">
                                        Not Verified
                                    </Typography>
                                    <HighlightOff sx={{ mt: 0.5, ml: 0.2 }} color="error" />
                                </Stack>
                            }
                        </Grid>
                    </Grid>
                    <Grid container direction="column" justifyContent="flex-start"
                        alignItems="flex-start">
                        <Grid item xs={12} md={12} lg={12} mb={1}  >
                            <FormLabel><Typography variant="h5">Client Type:</Typography></FormLabel>
                        </Grid>
                        <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                <OutlinedInput
                                    size="small"
                                    {...register("type",
                                        {
                                            value: currentApplicationDetailData.type == "ORG" ? "Organisation" : "Individual",
                                        })}
                                    id='type'
                                    sx={{
                                        "& .MuiInputBase-input.Mui-disabled": {
                                            WebkitTextFillColor: "#000000",
                                            background: "#f8f8f8",
                                        },
                                    }}
                                />
                            </FormControl>
                        </Grid>
                    </Grid>
                    {currentApplicationDetailData.type === "ORG" ?
                        <>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Company Name (English):</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("enCompanyName",
                                                {
                                                    value: companyName.enCompanyName,
                                                })}
                                            id='enCompanyName'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Company Name (Chinese):</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("chCompanyName",
                                                {
                                                    value: companyName.chCompanyName,
                                                })}
                                            id='chCompanyName'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("contactPerson",
                                                {
                                                    value: currentApplicationDetailData.contactPerson,
                                                })}
                                            id='contactPerson'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">BR No:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("brNo",
                                                {
                                                    value: brNo,
                                                })}
                                            id='brNo'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">BR Expiry Date:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("brExpiryDate",
                                                {
                                                    value: brExpiryDate,
                                                })}
                                            id='brExpiryDate'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1}   >
                                    <Stack direction="row">
                                        <FormControl variant="outlined" sx={{ width: '40%' }} disabled>
                                            <OutlinedInput
                                                size="small"
                                                {...register("countryCode",
                                                    {
                                                        value: currentApplicationDetailData.contactTel.countryCode,
                                                    })}
                                                id='countryCode'
                                                sx={{
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                        <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                            <OutlinedInput
                                                size="small"
                                                {...register("phoneNumber",
                                                    {
                                                        value: currentApplicationDetailData.contactTel.phoneNumber,
                                                    })}
                                                id='phoneNumber'
                                                sx={{
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                    </Stack>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("emailBus",
                                                {
                                                    value: currentApplicationDetailData.emailBus,
                                                })}
                                            id='emailBus'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </> :
                        <>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">English Name:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("enName",
                                                {
                                                    value: currentApplicationDetailData.enName,
                                                })}
                                            id='enName'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Chinese Name:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("chName",
                                                {
                                                    value: currentApplicationDetailData.chName,
                                                })}
                                            id='chName'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }}  >
                                    <Stack direction="row">
                                        <FormControl variant="outlined" sx={{ width: '40%' }} disabled>
                                            <OutlinedInput
                                                size="small"
                                                {...register("countryCode",
                                                    {
                                                        value: currentApplicationDetailData.mobileNumber.countryCode,
                                                    })}
                                                id='countryCode'
                                                sx={{
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                        <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                            <OutlinedInput
                                                size="small"
                                                {...register("phoneNumber",
                                                    {
                                                        value: currentApplicationDetailData.mobileNumber.phoneNumber,
                                                    })}
                                                id='phoneNumber'
                                                sx={{
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                    </Stack>
                                </Grid>
                            </Grid>
                            <Grid container direction="column" justifyContent="flex-start"
                                alignItems="flex-start">
                                <Grid item xs={12} md={12} lg={12} mb={1}
                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                    <FormLabel><Typography variant="h5">Email:</Typography></FormLabel>
                                </Grid>
                                <Grid item xs={12} md={12} lg={12} mb={1} sx={{ width: '100%' }} >
                                    <FormControl variant="outlined" sx={{ width: '100%' }} disabled >
                                        <OutlinedInput
                                            size="small"
                                            {...register("emailAddress",
                                                {
                                                    value: currentApplicationDetailData.emailAddress,
                                                })}
                                            id='emailAddress'
                                            sx={{
                                                "& .MuiInputBase-input.Mui-disabled": {
                                                    WebkitTextFillColor: "#000000",
                                                    background: "#f8f8f8",
                                                },
                                            }}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </>
                    }

                </form>
            </MainCard>
    );
};

export default ClientDetailCard;
