import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

import CalendarDay from './CalendarDay';
import { buildCalendarMatrix } from './helpers';
import styles from './styles.scss';

const Calendar = ({
  committedDates,
  currentMonth,
  hoverDate,
  isRange,
  onSelect,
  setHoverDate,
  setRangeDates,
  setSingleDate,
  step,
  weekdayLabels
}) => (
  <div className={styles.calendar__container}>
    <div>
      {weekdayLabels.map((label, i) => (
        <div key={i} className={styles['calendar__day-heading']}>
          {label}
        </div>
      ))}
    </div>
    <div className={styles.calendar__days}>
      {buildCalendarMatrix(moment(currentMonth)).map((week, weekIndex) => (
        <div key={weekIndex}>
          {week.map((value, dayIndex) => (
            <div
              key={dayIndex}
              className={styles['calendar__day-wrap']}
              onMouseEnter={() => setHoverDate(moment(value.date))}
              onMouseLeave={() => setHoverDate({})}
              onClick={() =>
                (isRange
                  ? setRangeDates({
                    date: moment(value.date)
                  })
                  : setSingleDate({ date: moment(value.date) }))}
            >
              <CalendarDay
                {...{
                  committedDates,
                  hoverDate,
                  step,
                  onSelect,
                  date: value.date,
                  isSameMonth: value.isSameMonth,
                  isRange
                }}
              />
            </div>
          ))}
        </div>
      ))}
    </div>
  </div>
);

Calendar.propTypes = {
  committedDates: PropTypes.arrayOf(PropTypes.object),
  currentMonth: PropTypes.shape(),
  hoverDate: PropTypes.shape({}),
  isRange: PropTypes.bool,
  onSelect: PropTypes.func,
  setHoverDate: PropTypes.func,
  setRangeDates: PropTypes.func,
  setSingleDate: PropTypes.func,
  step: PropTypes.number,
  weekdayLabels: PropTypes.arrayOf(PropTypes.string)
};

export default Calendar;