import { DatePicker, Form, FormItemProps } from "antd";
import dayjs from "dayjs";

import type { DatePickerProps } from "antd";
import { SERVER_DATE_FORMAT, UI_DATE_FORMAT } from "utils/constants.ts";

export default function ProDateFormInput({
  formItemProps,
  pickerProps,
}: {
  formItemProps: FormItemProps;
  pickerProps: DatePickerProps;
}) {
  return (
    <Form.Item
      getValueProps={(value) => ({
        value: value ? dayjs(value, SERVER_DATE_FORMAT) : undefined,
      })}
      normalize={(value) =>
        value ? `${dayjs(value).format(SERVER_DATE_FORMAT)}` : undefined
      }
      {...formItemProps}
    >
      <DatePicker
        format={{
          format: UI_DATE_FORMAT,
          type: "mask",
        }}
        {...pickerProps}
      />
    </Form.Item>
  );
}
