/**
 * imui.monthPicker - MonthItem
 * @author riverhan
 * @date 2017-2-19
 */

import React from 'react';
import classnames from 'classnames';
import {
  compareDate,
  getDayOfMonth

} from '../../datepicker/lib/dateUtils';

export default function MonthItem(props) {
  const { monthDay, selected, minDate, maxDate } = props;
  const month = monthDay.getMonth();
  const disabled = (minDate && compareDate(monthDay, getDayOfMonth(minDate)) < 0) ||
      (maxDate && compareDate(monthDay, getDayOfMonth(maxDate)) > 0);
  let isSelected = false;

  if (selected && monthDay.getFullYear() === selected.getFullYear()
    && month === selected.getMonth()) {
    isSelected = true;
  }

  return (
    <span
      className={classnames({
        'im-mp-month-item': true,
        selected: isSelected,
        disabled
      })}
      onClick={() => {
        if (!disabled) {
          props.onMonthClick(monthDay);
        }
      }}
    >{month + 1}</span>
  );
}