import React from 'react';

type Props = {
  value: Date;
  minimumDate?: Date;
  onChange: (date: Date) => void;
  onDismiss: () => void;
};

const toDateStr = (d: Date) => d.toISOString().split('T')[0];

export function DatePickerModal({ value, minimumDate, onChange, onDismiss }: Props) {
  return (
    <input
      type="date"
      value={toDateStr(value)}
      min={minimumDate ? toDateStr(minimumDate) : undefined}
      style={{
        display: 'block',
        marginTop: 8,
        padding: 8,
        fontSize: 16,
        borderRadius: 8,
        border: '1.5px solid #ccc',
        width: '100%',
        boxSizing: 'border-box',
      }}
      onChange={(e) => {
        if (e.target.value) {
          const [y, m, d] = e.target.value.split('-').map(Number);
          onChange(new Date(y, m - 1, d));
          onDismiss();
        }
      }}
    />
  );
}
