// Libs
// -----------------------------------------------------------------------------
import React, { FC, useState, useEffect } from 'react';
import { DatePicker, DatePickerProps } from 'antd';
import moment, { Moment } from 'moment';

// Props
// -----------------------------------------------------------------------------
type StringDatePickerProps = Omit<DatePickerProps, 'value' | 'onChange'> & {
  value?: string | null;
  onChange?: (value: string | null) => void;
  internalDateFormat?: string;
};

/**
 * Компонент-обертка для Ant DatePicker, принимающий строку формата YYYY-MM-DD.
 */
export const StringDatePicker: FC<StringDatePickerProps> = ({
  value,
  onChange,
  internalDateFormat = 'YYYY-MM-DD',
  ...datePickerProps
}) => {
  const [momentValue, setMomentValue] = useState<Moment | null>(null);

  useEffect(() => {
    setMomentValue(value ? moment(value, internalDateFormat) : null);
  }, [value, internalDateFormat]);

  return (
    <DatePicker
      value={momentValue}
      onChange={(newMomentValue: Moment | null) => {
        setMomentValue(newMomentValue);
        if (onChange) {
          if (newMomentValue) {
            onChange(newMomentValue.format(internalDateFormat));
          } else {
            onChange(null);
          }
        }
      }}
      {...datePickerProps}
    />
  );
};
