import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
import moment from "moment/moment";
import { useTranslations } from "next-intl";

export default function MuiDatePicker({
  setFieldValue,
  selectType,
  error,
  helperText,
}) {
  const t = useTranslations();

  const handleDateChange = (date) => {
    const selectedDate = moment(date).locale("fa"); // should add .format() at the end to format the data
    setFieldValue(selectType, selectedDate);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
      <DatePicker
        sx={{ width: "100%" }}
        label={t("MuiDatePicker.date_picker_birthday")}
        slotProps={{
          textField: {
            size: "small",
            helperText: helperText ? `${helperText}` : "YYYY-MM-DD",
            error: error ? true : false,
          },
        }}
        onChange={handleDateChange}
      />
    </LocalizationProvider>
  );
}