import {Grid} from '@mui/material';
import MuiDatePicker from "@/core/components/DataTable/filter/DatePicker/MuiDatePicker";
import {useEffect, useState} from "react";

const BetWeenDateFilter = ({formik, id, defaultValue}) => {
    useEffect(() => {
        formik.setFieldValue(`${id}[0]`, defaultValue?.[0] || '');
        formik.setFieldValue(`${id}[1]`, defaultValue?.[1] || '');
    }, []);

    const [dateRange, setDateRange] = useState(defaultValue);

    const handleDateChange = (index, value) => {
        const newRange = [...dateRange];
        newRange[index] = value;
        setDateRange(newRange);
    };

    return (
        <Grid container spacing={1} mt={1} mb={2}>
            <Grid item xs={6}>
                <MuiDatePicker label="تاریخ شروع " name={`${id}[0]`} formik={formik} defaultValue={defaultValue?.[0]}
                               minDate={null} maxDate={dateRange[1]}
                               onDateChange={(value) => handleDateChange(0, value)}/>
            </Grid>
            <Grid item xs={6}>
                <MuiDatePicker label="تاریخ پایان" name={`${id}[1]`} formik={formik} defaultValue={defaultValue?.[1]}
                               minDate={dateRange[0]} maxDate={null}
                               onDateChange={(value) => handleDateChange(1, value)}/>
            </Grid>
        </Grid>
    );
};

export default BetWeenDateFilter;
