import { FormItemProps, Form, TimePicker } from "antd";
import type { TimePickerProps } from "antd";

import dayjs from "dayjs";
import { UI_TIME_FORMAT } from "utils/constants.ts";

export default function TimeFormInput({
  formItemProps,
  pickerProps,
}: {
  formItemProps: FormItemProps;
  pickerProps: TimePickerProps;
}) {
  return (
    <Form.Item
      {...formItemProps}
      getValueProps={(value) => ({
        value: value ? dayjs(value, UI_TIME_FORMAT) : null,
      })}
      normalize={(value) =>
        value ? `${dayjs(value).format(UI_TIME_FORMAT)}` : ""
      }
      {...formItemProps}
    >
      <TimePicker format={UI_TIME_FORMAT} {...pickerProps} />
    </Form.Item>
  );
}