// material-ui
import {
    Button,
    Grid, TextField,InputLabel
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useForm} from "react-hook-form";
import * as React from "react";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {DemoItem} from "@mui/x-date-pickers/internals/demo";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {useState} from "react";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {LIONER_BUTTON_THEME} from "../../themes/colorConst";
import {ThemeProvider} from "@emotion/react";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const LoginLogSearchForm = ({applySearch}) => {

    const { reset, register, handleSubmit } = useForm()
    const [fromDate, setFromDate] = useState(null);
    const [toDate, setToDate] = useState(null);
    const [fromError, setFromError] = React.useState(null);
    const [toError, setToError] = React.useState(null);
    const fromErrorMessage = React.useMemo(() => {
        switch (fromError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [fromError]);

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

    const onSubmit = (data) => {
        const temp = {
            username: data.username,
            ipAddr: data.ipAddr,
            fromDate: fromDate === null ? null : dayjs(fromDate).format('YYYY-MM-DD'),
            toDate: toDate === null ? null : dayjs(toDate).format('YYYY-MM-DD'),
        }
        applySearch(temp);
    };

    function resetForm(){
        setFromDate(null);
        setToDate(null);
        reset();
    }

    return (
        <MainCard xs={12} md={12} lg={12}
                  content={false}
                  sx={{width:CARD_MAX_WIDTH}}
        >

            <form onSubmit={handleSubmit(onSubmit)}>
                {/*row 1*/}
                <Grid sx={{mb:2}}/>

                {/*row 2*/}
                <Grid container alignItems={"center"} >
                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml:3, mr:3, }}>
                        <InputLabel>
                            Username
                        </InputLabel>
                        <TextField
                            fullWidth
                            {...register("username")}
                            inputProps={{maxLength: 32}}
                            id='userName'
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3,}}>
                        <InputLabel>
                            IP Address
                        </InputLabel>
                        <TextField
                            fullWidth
                            {...register("ipAddr")}
                            inputProps={{maxLength: 45}}
                            id='ipAddress'
                            autoComplete="off"
                        />
                    </Grid>

                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, }}>
                        <InputLabel>
                            Date Period
                        </InputLabel>
                        <Grid container>
                            <Grid item xs={5.5} s={5.5} md={5.5} lg={5.5}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="fromDate"
                                            format="DD/MM/YYYY"
                                            onError={(newError) => setFromError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: fromErrorMessage,
                                                },
                                            }}
                                            value={fromDate === null ? null : dayjs(fromDate)}
                                            onChange={(newValue) => setFromDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>

                            <Grid item xs={1} s={1} md={1} lg={1} sx={{display: 'flex', justifyContent:"center", alignItems: 'center'}}>
                                To
                            </Grid>

                            <Grid item xs={5.5} s={5.5} md={5.5} lg={5.5}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="toDate"
                                            format="DD/MM/YYYY"
                                            onError={(newError) => setToError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: toErrorMessage,
                                                },
                                            }}
                                            //label="To Date"
                                            value={toDate === null ? null : dayjs(toDate)}
                                            onChange={(newValue) => setToDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>


                {/*last row*/}
                <Grid container maxWidth justifyContent="flex-start" sx={{mt:2,mb:2}}>
                    <ThemeProvider theme={LIONER_BUTTON_THEME}>
                        <Grid item sx={{ml:3, mr:1.5, }}>
                            <Button
                                variant="contained"
                                type="submit"
                                color="save"
                                disabled={fromError || toError}
                            >
                                Search
                            </Button>
                        </Grid>

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

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

export default LoginLogSearchForm;
