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

import styles from './styles.scss';

const getStartDate = committedDates =>
  (committedDates[0] && Object.keys(committedDates[0]).length > 0 ? moment(committedDates[0]) : null);

const getEndDate = committedDates =>
  (committedDates[1] && Object.keys(committedDates[1]).length > 0 ? moment(committedDates[1]) : null);

const isValidHoveredDate = hoverDate => Object.keys(hoverDate).length > 0;

const isStartDate = ({ committedDates, date }) => {
  const startDate = getStartDate(committedDates);
  return startDate ? date.isSame(startDate, 'day') : false;
};

const isEndDate = ({ committedDates, date }) => {
  const endDate = getEndDate(committedDates);
  return endDate ? date.isSame(endDate) : false;
};

const isBetweenRange = ({ committedDates, date, hoverDate, step }) => {
  const startDate = getStartDate(committedDates);
  const endDate = getEndDate(committedDates);
  const validHoveredDate = isValidHoveredDate(hoverDate);

  let isBetween = false;

  if (endDate) {
    isBetween = date.isBetween(startDate, endDate);
  }
  if (startDate && !endDate && validHoveredDate && step === 1) {
    isBetween = date.isBetween(hoverDate, startDate) || date.isBetween(startDate, hoverDate);
  }
  if (!startDate && endDate && validHoveredDate && step === 0) {
    isBetween = date.isBetween(hoverDate, endDate) || date.isBetween(endDate, hoverDate);
  }
  if (startDate && endDate && validHoveredDate) {
    isBetween = (
      date.isBetween(hoverDate, startDate) ||
      date.isBetween(endDate, hoverDate) ||
      date.isBetween(startDate, endDate)
    );
  }

  return isBetween;
};

const CalendarDay = ({ committedDates, date, hoverDate, isSameMonth, step }) => (
  <div
    className={cx(styles.calendar__day, {
      [styles['calendar__day--start']]: isStartDate({ committedDates, date }),
      [styles['calendar__day--not-current']]: !isSameMonth,
      [styles['calendar__day--end']]: isEndDate({ committedDates, date }),
      [styles['calendar__day--is-between-range']]: isBetweenRange({
        committedDates,
        date,
        hoverDate,
        step
      })
    })}
  >
    {date.date()}
  </div>
);

CalendarDay.propTypes = {
  committedDates: PropTypes.arrayOf(PropTypes.object),
  date: PropTypes.shape(),
  hoverDate: PropTypes.shape({}),
  isSameMonth: PropTypes.bool,
  step: PropTypes.number
};

export default CalendarDay;