import React from 'react';
import { Glyphicon, Button } from 'react-bootstrap';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { formatDate, parseDate } from 'react-day-picker/moment';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import styles from './InvestigationDateFilter.module.css';

function InvestigationDateFilter(props) {
  const { rootClassName, value, onDayChange, onClear } = props;

  return (
    <div className={rootClassName}>
      <DayPickerInput
        inputProps={{ className: styles.dateFilterInput }}
        value={value}
        placeholder="Filter by start date"
        format={INVESTIGATION_DATE_FORMAT}
        formatDate={formatDate}
        parseDate={parseDate}
        onDayChange={onDayChange}
      />
      <Button
        disabled={!value}
        onClick={onClear}
        bsStyle="link"
        className={styles.clearButton}
      >
        <Glyphicon glyph="remove" />
      </Button>
    </div>
  );
}

export default InvestigationDateFilter;
