import React, { useState } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames/bind';
import { ChevronLeft, ChevronRight } from 'react-feather';
import styles from './datepicker.scss';
import Button from '../Button';
import View from './view';

import 'moment/locale/nl';

const cx = classnames.bind(styles);

const Header = ({
  currentValue,
  previousMonthDisabled,
  nextMonthDisabled,
  decreaseMonth,
  increaseMonth,
  changeYear,
  changeMonth,
}) => {
  const generateDates = (date, type, format) => {
    const momentObject = moment().set(type, date);
    const dates = [momentObject.format(format)];

    for (let index = 0; index < 4; index += 1) {
      dates.push(
        moment()
          .set(type, date)
          .add(index + 1, type)
          .format(format)
      );
      dates.unshift(
        moment()
          .set(type, date)
          .subtract(index + 1, type)
          .format(format)
      );
    }

    return dates;
  };

  const [currentYear, setCurrentYear] = useState(moment(currentValue).year());
  const [currentMonth, setCurrentMonth] = useState(
    moment(currentValue).month()
  );

  const initialYears = generateDates(currentYear, 'year', 'YYYY');
  const initialMonths = generateDates(currentMonth, 'month', 'MMMM');

  const [availableYears, setAvailableYears] = useState(initialYears);
  const [availableMonths, setAvailableMonths] = useState(initialMonths);

  return (
    <div className={cx('datepicker__calendar_header')}>
      <Button
        small
        theme="clear"
        onClick={decreaseMonth}
        disabled={previousMonthDisabled}
      >
        <ChevronLeft />
      </Button>

      <div className={cx('datepicker__calendar_header_row')}>
        <View
          currentValue={moment()
            .set('year', currentYear)
            .toDate()}
          availableValues={availableYears}
          format="YYYY"
          onClick={year => {
            setAvailableYears(generateDates(year, 'year', 'YYYY'));
            setCurrentYear(year);
            changeYear(year);
          }}
        />

        <View
          currentValue={moment()
            .set('month', currentMonth)
            .toDate()}
          availableValues={availableMonths}
          format="MMMM"
          onClick={month => {
            const formatted = moment()
              .set('month', month)
              .month();

            setAvailableMonths(generateDates(formatted, 'month', 'MMMM'));
            setCurrentMonth(formatted);
            changeMonth(formatted);
          }}
        />
      </div>

      <Button
        small
        theme="clear"
        onClick={increaseMonth}
        disabled={nextMonthDisabled}
      >
        <ChevronRight />
      </Button>
    </div>
  );
};

Header.defaultProps = {
  currentValue: new Date(),
};

Header.propTypes = {
  currentValue: PropTypes.instanceOf(Date),
  previousMonthDisabled: PropTypes.bool.isRequired,
  nextMonthDisabled: PropTypes.bool.isRequired,
  increaseMonth: PropTypes.func.isRequired,
  decreaseMonth: PropTypes.func.isRequired,
  changeMonth: PropTypes.func.isRequired,
  changeYear: PropTypes.func.isRequired,
};

export default Header;