import React from "react";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import { faIR } from "@mui/x-date-pickers/locales";
import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
import { IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";

const CustomDatePicker = ({ dateValue, setDateValue, placeholder = "انتخاب تاریخ", size = "small" }) => {
    const handleDateChange = (newValue) => {
        setDateValue(newValue);
    };

    return (
        <LocalizationProvider
            dateAdapter={AdapterDateFnsJalali}
            localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
        >
            <MobileDatePicker
                value={dateValue || null}
                onChange={handleDateChange}
                slotProps={{
                    textField: {
                        size: size,
                        placeholder: placeholder,
                        InputProps: {
                            endAdornment: (
                                <InputAdornment position="end">
                                    <IconButton
                                        size={size}
                                        onClick={(event) => {
                                            event.stopPropagation();
                                            setDateValue(null);
                                        }}
                                        sx={{
                                            color: "#bfbfbf",
                                            "&:hover": {
                                                backgroundColor: "rgba(189, 189, 189, 0.1)",
                                                color: "#363434",
                                            },
                                        }}
                                    >
                                        <ClearIcon />
                                    </IconButton>
                                </InputAdornment>
                            ),
                        },
                    },
                }}
            ></MobileDatePicker>
        </LocalizationProvider>
    );
};
export default CustomDatePicker;