/**
 * imui.Datepicker - Month
 * @author riverhan
 * @data 2016-8-10
 */

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

import {
  getDayOfMonth,
  getDayOfWeek,
  addDayWithWeeks,
  isWeekInMonth,
  getPureDate,
  getMode,
} from './dateUtils';
import Week from './Week';

class Month extends React.Component {
  static propTypes = {
    day: PropTypes.object.isRequired,
    onDayClick: PropTypes.func.isRequired,
    onDayHover: PropTypes.func,
    minDate: PropTypes.object,
    maxDate: PropTypes.object,
    weekMode: PropTypes.bool,
    mode: PropTypes.string,
    selectedRange: PropTypes.shape({ // 当前选中的日期范围,为两个元素的数组
      from: PropTypes.instanceOf(Date),
      to: PropTypes.instanceOf(Date),
    }),
    maySelectedRange: PropTypes.shape({ // 当前选中的日期范围,为两个元素的数组
      from: PropTypes.instanceOf(Date),
      to: PropTypes.instanceOf(Date),
    }),
    highLightDates: PropTypes.array, // 高亮的日期
    onlyEnableHighLightDate: PropTypes.bool, // 仅高亮的日期可以选中
  };

  static defaultProps = {
    day: new Date(),
  };

  renderWeeks() {
    const day = getPureDate(this.props.day);
    const firstDayInMonth = getDayOfMonth(day, 1);
    const firstDayInWeek = getDayOfWeek(firstDayInMonth, 0);

    return [0, 1, 2, 3, 4, 5]
      .map(offset => addDayWithWeeks(firstDayInWeek, offset))
      .filter(firstDay => isWeekInMonth(firstDay, day))
      .map((startOfWeek, offset) =>
        <Week
          key={`${startOfWeek.getTime()}-${offset}`}
          startOfWeek={startOfWeek}
          monthDay={day}
          selected={this.props.selected}
          onDayClick={this.props.onDayClick}
          onDayHover={this.props.onDayHover}
          minDate={this.props.minDate}
          maxDate={this.props.maxDate}
          weekMode={this.props.weekMode}
          mode={getMode(this.props.mode, this.props.weekMode)}
          selectedRange={this.props.selectedRange}
          maySelectedRange={this.props.maySelectedRange}
          highLightDates={this.props.highLightDates}
          onlyEnableHighLightDate={this.props.onlyEnableHighLightDate}
        />
      );
  }

  render() {
    const month = this.props.day.getMonth() + 1;

    return (
      <div
        className="im-dp-month"
      >
        <span
          className="im-dp-month-bg"
        >
          {month}
        </span>
        <div
          className="im-dp-month-bd"
        >
          {this.renderWeeks()}
        </div>
      </div>
    );
  }
}

export default Month;