import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
import { Box, IconButton, InputAdornment, TextField } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { useState } from "react";

export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
    const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);

    return (
        <Box sx={{ position: 'relative' }}>
            <LocalizationProvider
                dateAdapter={AdapterDateFnsJalali}
                localeText={
                    faIR.components.MuiLocalizationProvider.defaultProps.localeText
                }
            >
                <MobileDateTimePicker
                    key={formik.values[name]}
                    ampm={false}
                    onChange={(newValue) => {
                        const date = new Date(newValue);
                        const formattedDate = moment(date)
                            .locale("en")
                            .format("YYYY-MM-DD HH:mm");
                        formik.setFieldValue(name, formattedDate);
                        onDateChange(formattedDate);
                        setPickerValue(newValue);
                    }}
                    slotProps={{
                        textField: {
                            placeholder: "تاریخ خود را وارد کنید",
                            helperText: label,
                            InputProps: {
                                endAdornment: (
                                    <InputAdornment position="end">
                                        <IconButton
                                            size="small"
                                            onClick={(event) => {
                                                event.stopPropagation();
                                                formik.setFieldValue(name, "");
                                                setPickerValue(null);
                                            }}
                                            sx={{
                                                color: "#bfbfbf",
                                                '&:hover': {
                                                    backgroundColor: 'rgba(189, 189, 189, 0.1)',
                                                },
                                            }}
                                        >
                                            <ClearIcon />
                                        </IconButton>
                                    </InputAdornment>
                                ),
                            },
                        },
                    }}
                    value={pickerValue}
                    minDate={minDate ? new Date(minDate) : null}
                    maxDate={maxDate ? new Date(maxDate) : null}
                />
            </LocalizationProvider>
        </Box>
    );
}