import DatePickerGroup from './DatePickerGroup';
import { DatePickerHelper } from './DatePickerHelper';

export interface StringDateOnlyPickerGroupProps
  extends DatePickerHelper<string | undefined | null> {}

/**
 * Date picker input that consumes and outputs as a date only string in ISO format `YYYY-MM-DD`.
 *
 * Default display to the user is in `MM/DD/YYYY` format.
 */
export default function StringDatePickerGroup(
  props: StringDateOnlyPickerGroupProps
) {
  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
}

function convertToDateOnly(arg: Date) {
  const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
    .format(arg)
    .padStart(4, '0');

  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(arg);

  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(arg);

  return `${year}-${month}-${day}`;
}