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;
