// material-ui
import {
    Grid, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {GENERAL_RED_COLOR} from "../../themes/colorConst";
import {getComboValueByLabel, isOptionEqualToValue, isStringEmptyAfterTrim} from "../../utils/CommonFunction";
import Autocomplete from "@mui/material/Autocomplete";
import {BRANCH_COMBO} from "../../utils/ComboConst";
import {isObjEmpty} from "../../utils/Utils";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";
//import {useParams} from "react-router-dom";

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

const DivisionInfoCard = ({isCollectData, updateGroupObject,divisionData,isNewRecord,setUserConfirm,setIsCollectData}) => {
    //const params = useParams();
    const [currentDivisionData, setCurrentDivisionData] = useState({});
    const [selectedBranch, setSelectedBranch] = useState(null);
    const [onReady, setOnReady] = useState(false);
    const {register, getValues} = useForm()
    const [errors, setErrors] = useState({});

    useEffect(() => {
        //if user data from parent are not null
        if (Object.keys(divisionData).length > 0 && divisionData !== undefined) {
            setCurrentDivisionData(divisionData);
        }
    }, [divisionData]);

    useEffect(() => {
        //if state data are ready and assign to different field
        if (!isObjEmpty(currentDivisionData)) {
            setSelectedBranch(getComboValueByLabel(BRANCH_COMBO,currentDivisionData.branch));
            setOnReady(true);
        }
        if(isNewRecord){
            setOnReady(true);
        }
    }, [currentDivisionData]);

    useEffect(() => {
        //upload latest data to parent
        if(isCollectData){
            const values = getValues();
            const formErrors = {};

            if (isStringEmptyAfterTrim(values.divisionName)) {
                formErrors.divisionName = 'Division Name is required';
            }

            if (selectedBranch === null) {
                formErrors.branch = 'Branch is required';
            }


            setErrors(formErrors);

            if (Object.keys(formErrors).length === 0) {
                const objectData ={
                    ...values,
                    branch: selectedBranch.label,
                }
                updateGroupObject(objectData);
            }
            else if(isCollectData){
                setUserConfirm(false);
                setIsCollectData(false);
            }
        }


    }, [isCollectData]);


    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      content={false}
                      sx={{width:CARD_MAX_WIDTH}}
            >
                <Typography variant="h5" sx={{mt: 1.5, ml: 3}}>
                    Information
                </Typography>

                <form>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Division Name:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        {...register("divisionName",
                                            {
                                                value: currentDivisionData.name,
                                            })}
                                        id='divisionName'
                                        inputProps={{maxLength: 255}}
                                        error={!!errors.divisionName}
                                        helperText={errors.divisionName}
                                        required
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Branch: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <Autocomplete
                                        disablePortal
                                        id="branch-combo"
                                        size="small"
                                        value={selectedBranch === null? null : selectedBranch}
                                        options={BRANCH_COMBO}
                                        onChange={(event, newValue) => {
                                            setSelectedBranch(newValue);
                                        }}
                                        renderInput={(params) => <TextField
                                            {...params}
                                            label=""
                                            error={!!errors.branch}
                                            helperText={errors.branch}
                                        />}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

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

export default DivisionInfoCard;
