// material-ui
import {
    Button,
    Typography,
    Grid, TextField, InputLabel, CardActions
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import {useForm} from "react-hook-form";
import {useContext, useState} from "react";
import * as React from "react";
import {LIONER_BUTTON_THEME} from "../../../themes/colorConst";
import {useNavigate} from "react-router";
import {ThemeProvider} from "@emotion/react";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import dayjs from "dayjs";
import AbilityContext from "../../../components/AbilityProvider";
import {LIONER_FORM_THEME, CARD_MAX_WIDTH} from "../../../themes/themeConst";
import Collapse from '@mui/material/Collapse';
import {ExpandMore} from "@mui/icons-material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';


// ==============================|| Consultant - Search Form ||============================== //

const ConsultantSearchForm = ({applySearch, setExpanded,expanded, clientId}) => {

    const navigate = useNavigate()
    const ability = useContext(AbilityContext);

    const [isWindowOpen, setIsWindowOpen] = React.useState(false);
    const [createDateFrom, setCreateDateFrom] = useState(null);
    const [createDateTo, setCreateDateTo] = useState(null);

    const { setValue, reset, register, handleSubmit, getValues } = useForm()
    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    const [createDateFromError, setCreateDateFromError] = React.useState(null);
    const [createDateToError, setCreateDateToError] = React.useState(null);

    const createDateFromErrorMessage = React.useMemo(() => {
        switch (createDateFromError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [createDateFromError]);

    const createDateToErrorMessage = React.useMemo(() => {
        switch (createDateToError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [createDateToError]);

    const createNewConsultant = () => {
        navigate(`/consultant/-1`);
    };

    const onSubmit = (data) => {
        const criteria = {
            ...data,
            createDateFrom: createDateFrom === null ? null : dayjs(createDateFrom).format('YYYY-MM-DD'),
            createDateTo: createDateTo === null ? null : dayjs(createDateTo).format('YYYY-MM-DD'),
        };
        applySearch(criteria);
    };

    function resetForm(){
        setCreateDateFrom(null);
        setCreateDateTo(null);
        reset();
    }

    const handleNewClick = () => {
        setIsWindowOpen(true);
        navigate(`/pdf/maintain/${id}`);
    };

    const handleCloseClick = () => {
        setIsWindowOpen(false);
    }

    const handleCloseRefresh = () => {
        setIsWindowOpen(false);
        applySearch();
    }
    
    return (
        <MainCard xs={12} md={12} lg={12}
                  content={false}
                  sx={{width:CARD_MAX_WIDTH}}
        >
            <Grid item onClick={handleExpandClick}>
            <CardActions disableSpacing>
                {/*row 1*/}
                <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:2,mb:1}}>
                    <Typography variant="lionerSubLabel" >
                        Search Criteria(s)
                    </Typography>
                </Grid>

                <ExpandMore
                    expand={expanded.toString()}
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label="show more"
                    style={{ marginLeft: 'auto' }} // Align the button to the right
                >
                    <ExpandMoreIcon />
                </ExpandMore>
            </CardActions>
            </Grid>

            <Collapse in={expanded} timeout="auto" unmountOnExit>
                <form onSubmit={handleSubmit(onSubmit)}>
                <ThemeProvider theme={LIONER_FORM_THEME}>
                {/*row 2*/}
                <Grid container alignItems={"flex-start"} >
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                        <InputLabel htmlFor="template">Name</InputLabel>
                        <TextField
                            fullWidth
                            {...register("name")}
                            id='name'
                            inputProps={{maxLength: 255}}
                            // label="Client Name"
                            autoComplete="off"
                        />
                    </Grid>

                </Grid>


                {/*last row*/}
                <Grid container maxWidth justifyContent="space-between" sx={{mt:1.5}}>
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                    <Grid item>
                        <Grid container>
                            <Grid item sx={{ml:3, mr:1.5, mb:2}}>
                                <Button
                                    variant="contained"
                                    type="submit"
                                    color="save"
                                    disabled={createDateFromError || createDateToError}
                                    onClick={applySearch}
                                >
                                    Search
                                </Button>
                            </Grid>

                            <Grid item sx={{ml:{xs:1.5, md:1.5, lg:1.5}, mr:1.5, mb:2}}>
                                <Button
                                    variant="contained"
                                    color="cancel"
                                    onClick={resetForm}
                                    >
                                    Reset
                                </Button>
                            </Grid>
                        </Grid>
                    </Grid>

                    <Grid item>
                        <Grid container>
                            <Grid item sx={{ml:3, mr:3, mb:0.5}}>
                                <Button
                                    variant="contained"
                                    color="create"
                                    onClick={createNewConsultant}
                                    >
                                    New Consultant
                                </Button>
                            </Grid>
                            :
                            <Grid/>
                        </Grid>
                    </Grid>
                    </ThemeProvider>
                </Grid>
                </ThemeProvider>
                </form>
            </Collapse>
        </MainCard>
    );
};

export default ConsultantSearchForm;
