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

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

import {
  getDayOfWeek,
  addDay,
  getMode,
} from './dateUtils';
import Day from './Day';

class Week extends React.Component {
  static propTypes = {
    startOfWeek: PropTypes.object.isRequired,
    monthDay: PropTypes.object.isRequired,
    onDayClick: PropTypes.func.isRequired,
    onDayHover: PropTypes.func,
    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 = {
    startOfWeek: new Date(),
    monthDay: new Date(),
  };

  renderDays() {
    const firstDayOfWeek = getDayOfWeek(this.props.startOfWeek, 0);

    return [0, 1, 2, 3, 4, 5, 6]
      .map(offset => addDay(firstDayOfWeek, offset))
      .map((day, offset) => {
        return (
          <Day
            key={offset}
            day={day}
            selected={this.props.selected}
            monthDay={this.props.monthDay}
            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() {
    return (
      <div
        className="im-dp-week"
      >
        {this.renderDays()}
      </div>
    );
  }
}

export default Week;