import { PureComponent } from 'react';
import { injectIntl, WrappedComponentProps } from 'react-intl';

import messages from '../DateLookup.messages';
import DateHeader from '../dateHeader';

import YearCalendarTable from './table';

interface YearCalendarProps extends WrappedComponentProps {
  selectedDate: Date | null;
  min: Date | null;
  max: Date | null;
  viewYear: number;
  placeholder: string;
  onSelect: () => void;
  onViewDateUpdate: (date: { year: number }) => void;
}

class YearCalendar extends PureComponent<YearCalendarProps> {
  onYearSelect = (year: number) => {
    this.props.onViewDateUpdate({ year });
    this.props.onSelect();
  };

  selectPreviousYears = () => {
    this.props.onViewDateUpdate({ year: this.props.viewYear - 20 });
  };

  selectNextYears = () => {
    this.props.onViewDateUpdate({ year: this.props.viewYear + 20 });
  };

  render() {
    const {
      selectedDate,
      min,
      max,
      viewYear,
      placeholder,
      intl: { formatMessage },
    } = this.props;
    return (
      <>
        <DateHeader
          dateMode={formatMessage(messages.twentyYears)}
          onPreviousClick={this.selectPreviousYears}
          onNextClick={this.selectNextYears}
        />
        <YearCalendarTable
          selectedDate={selectedDate}
          min={min}
          max={max}
          viewYear={viewYear}
          placeholder={placeholder}
          onSelect={this.onYearSelect}
        />
      </>
    );
  }
}

export default injectIntl(YearCalendar);