import moment from 'moment';
import DateInput from '../DateInput';
import { DateRange } from './types';

interface DateRangeRowProps extends DateRange {
  onStartDateChange: (date: moment.Moment | null) => void;
  onEndDateChange: (date: moment.Moment | null) => void;
  disabled?: boolean;
}

const DateRangeRow = (
  { startDate = null, endDate = null, disabled = false, onStartDateChange, onEndDateChange }: DateRangeRowProps,
) => (
  <div className="row">
    <div className="col-md-6">
      <DateInput
        selected={startDate}
        placeholderText="Since..."
        isClearable
        maxDate={endDate ?? undefined}
        disabled={disabled}
        onChange={onStartDateChange}
      />
    </div>
    <div className="col-md-6">
      <DateInput
        className="mt-2 mt-md-0"
        selected={endDate}
        placeholderText="Until..."
        isClearable
        minDate={startDate ?? undefined}
        disabled={disabled}
        onChange={onEndDateChange}
      />
    </div>
  </div>
);

export default DateRangeRow;