import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Immutable from 'immutable'
import classnames from 'classnames'
import moment from 'moment'
import { Icon } from 'components'
import styles from './Calendar.less'

class Calendar extends Component {
  static propTypes = {
    fillDates: PropTypes.instanceOf(Immutable.Map).isRequired,
    onChange: PropTypes.func.isRequired,
  }

  state = {
    dateList: [],
    curMoment: moment(),
    selectedDay: 0,
    fillDates: Immutable.fromJS({}),
  }

  componentWillMount () {
    this.renderDateList()
  }

  componentWillReceiveProps (nextProps) {
    console.log('test')
    if (this.props.fillDates !== nextProps.fillDates) {
      this.setState({ fillDates: nextProps.fillDates }, () => {
        this.renderDateList()
      })
    }
  }

  handlePreMonth () {
    this.setState(prevState => ({
      curMoment: prevState.curMoment.subtract(1, 'M'),
    }), () => {
      this.renderDateList()
    })
  }

  handleNextMonth () {
    this.setState(prevState => ({
      curMoment: prevState.curMoment.add(1, 'M'),
    }), () => {
      this.renderDateList()
    })
  }

  handleChange = (day, curDays) => () => {
    if (curDays) {
      this.setState({ selectedDay: day })
      this.props.onChange(this.state.curMoment.format('YYYY / MM'), day)
    }
  }

  renderDateList () {
    const { curMoment } = this.state
    const dates = []
    const start = (curMoment.date(1).weekday() + 1) % 7
    const end = curMoment.add(1, 'M').date(0).date()

    for (let i = 0; i < start; i += 1) {
      dates.push('')
    }
    for (let i = 0; i < end; i += 1) {
      dates.push((i + 1).toString())
    }
    if (dates.length % 7 > 0) {
      const padRight = 7 - (dates.length % 7)
      for (let i = 0; i < padRight; i += 1) {
        dates.push('')
      }
    }
    this.setState({ dateList: dates })
  }

  render () {
    const { curMoment, dateList, fillDates, selectedDay } = this.state
    const curMonth = curMoment.format('YYYY / MM')
    const dicDates = fillDates.get(curMonth)
    // console.log(dicDates && dicDates.toJS());
    return (
      <div className={styles.cal_box}>
        <div className={styles.top_box}>
          <div className={classnames(styles.item, styles.left)}>
            <Icon onClick={::this.handlePreMonth} type={require('svg/arrow-left-light.svg')} />
          </div>
          <div className={classnames(styles.item, styles.center)}>
            {curMonth}
          </div>
          <div className={classnames(styles.item, styles.right)}>
            <Icon onClick={::this.handleNextMonth} className={classnames(styles.right_icon)} type={require('svg/arrow-left.svg')} />
          </div>
        </div>
        <div className={styles.list}>
          <div className={styles.header}>
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
          </div>
          <div className={styles.body}>
            {dateList.map((item, key) => {
              const curDays = dicDates && dicDates.get(`${item}`)
              return (
                <span key={key} className={classnames(!!curDays && styles.enable, selectedDay === item && styles.active)} onClick={::this.handleChange(item, curDays)}>{item}</span>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}

export default Calendar

@@ -518,20 +518,64 @@
 JS(%7B%7D),%0A
+    prevStatus: true,%0A    nextStatus: true,%0A
   %7D%0A
-
 %0A  compo
@@ -674,35 +674,25 @@
     
-console.log('test')%0A    if 
+if (!Immutable.is
 (thi
@@ -712,12 +712,9 @@
 ates
- !==
+,
  nex
@@ -730,16 +730,17 @@
 llDates)
+)
  %7B%0A     
@@ -865,32 +865,84 @@
 reMonth () %7B%0A   
+ const %7B prevStatus %7D = this.state%0A    prevStatus &&
  this.setState(p
@@ -1089,24 +1089,76 @@
 nth () %7B%0A   
+ const %7B nextStatus %7D = this.state%0A    nextStatus &&
  this.setSta
@@ -2084,16 +2084,40 @@
 ectedDay
+, prevStatus, nextStatus
  %7D = thi
@@ -2224,57 +2224,9 @@
 th)%0A
-    // console.log(dicDates && dicDates.toJS());
 %0A
+
     
@@ -2427,32 +2427,77 @@
 PreMonth%7D type=%7B
+prevStatus ? require('svg/arrow-left.svg') : 
 require('svg/arr
@@ -2809,16 +2809,29 @@
 %7D type=%7B
+nextStatus ? 
 require(
@@ -2847,24 +2847,62 @@
 w-left.svg')
+ : require('svg/arrow-left-light.svg')
 %7D /%3E%0A       

fix Calendar