import React, { PropTypes } from 'react'
import { isEmpty } from 'lodash'
import Cards from 'shared/components/wall/PostCards'
import DayPicker from 'react-day-picker'
import { LocaleUtils } from 'react-day-picker/lib/addons'
import { isSameDay } from 'shared/utils/date-utils'
import moment from 'moment'
import 'moment/locale/zh-tw'
import counterpart from 'counterpart'
import WallButtons from 'shared/components/wall/WallButtons'
import { fixLocaleName } from 'shared/utils/locale-utils'
import { BaseComponent } from 'shared/components'
import { createHistory } from 'history'
import queryString from 'query-string'

let unlisten
let history
if (process.env.BROWSER) {
  require('css/ui/date-picker')
  history = createHistory()
}

export default class Cal extends BaseComponent {

  static propTypes = {
    fetchList: PropTypes.func.isRequired,
    countPostsWithCal: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired
  }

  constructor (props) {
    super(props)

    counterpart.setLocale(this.getLocale())
    moment.locale(fixLocaleName(this.getLocale()))

    let day
    if (process.env.BROWSER) {
      day = queryString.parse(window.location.search).day
    }

    this.state = {
      date: day
        ? moment(day).startOf('day').valueOf()
        : moment(new Date()).startOf('day').valueOf(),
      selectedDay: day ? new Date(day) : new Date(),
      locale: fixLocaleName(this.getLocale())
    }

    counterpart.onLocaleChange(::this.handleLocaleChange)

    if (process.env.BROWSER) {
      unlisten = history.listen((location) => {
        day = queryString.parse(location.search).day
        this.setState({
          date: day
            ? moment(day).startOf('day').valueOf()
            : moment(new Date()).startOf('day').valueOf(),
          selectedDay: day ? new Date(day) : new Date()
        })
      })
    }
  }

  componentDidMount () {
    const day = this.state.date
    if (day) {
      const date = moment(day).startOf('day').valueOf()
      this.refs.daypicker.showMonth(new Date(day))
    }
  }

  componentWillUnmount () {
    if (process.env.BROWSER) {
      unlisten()
    }
  }

  getTodayCount (date) {
    if (typeof date !== 'undefined') {
      const count = this.props.post.count[date]
      return typeof count !== 'undefined' && count !== null ? count : 0
    } else {
      return 0
    }
  }

  getTodayStartCount (date) {
    if (typeof date !== 'undefined') {
      const count = this.props.post.countStart[date]
      return typeof count !== 'undefined' && count !== null ? count : 0
    } else {
      return 0
    }
  }

  setHistory (day) {
    const pathname = window.location.pathname
    const _day = moment(day).format('YYYY-MM-DD')
    history.pushState({ the: 'state' }, pathname + '?day=' + _day)
  }

  handleDayClick (e, day) {
    const date = moment(day).valueOf()
    const reload = true
    this.props.fetchList(0, 10, date, null, reload)

    this.setHistory(day)

    this.setState({
      date: date,
      selectedDay: day
    })
  }

  handleMonthChange (day) {
    this.props.countPostsWithCal(moment(day).year(), moment(day).month() + 1)
  }

  handleLocaleChange (newLocale) {
    if (process.env.BROWSER) {
      const locale = fixLocaleName(newLocale)
      moment.locale(locale)
      this.setState({ locale })
    }
  }

  loadFunc () {
    const { post } = this.props
    this.props.fetchList(post.offset, post.limit, this.state.date)
  }

  renderDay (day) {
    const date = day.getDate()
    const count = this.getTodayStartCount(date)

    return (
      <div>
        <div className="day">
          { date }
        </div>
        { count > 0 && (<span className="event-started">＊</span>) }
        { count === 0 && (<span className="event-none">＊</span>) }
      </div>
    )
  }

  /* eslint-disable max-len */
  render () {
    const Translate = require('react-translate-component')
    const { post } = this.props
    const loading = post.isFetching || false
    const { selectedDay, locale } = this.state
    const modifiers = {
      'sunday': (day) => day.getDay() === 0,
      'saturday': (day) => day.getDay() === 6,
      'selected': (day) => isSameDay(selectedDay, day),
      'has-events-lv1': (day) => this.getTodayCount(day.getDate()) > 0,
      'has-events-lv2': (day) => this.getTodayCount(day.getDate()) > 11,
      'has-events-lv3': (day) => this.getTodayCount(day.getDate()) > 41,
      'has-events-lv4': (day) => this.getTodayCount(day.getDate()) > 81
    }

    return (
      <main className="ui two column has-header stackable grid container">
        <div className="eight wide computer sixteen wide tablet column">
          <WallButtons />
          <DayPicker
            ref="daypicker"
            renderDay={::this.renderDay}
            modifiers={modifiers}
            onDayClick={::this.handleDayClick}
            onMonthChange={::this.handleMonthChange}
            locale={locale}
            localeUtils={LocaleUtils}
          />
        </div>
        <div className="eight wide computer sixteen wide tablet column">
          <div className="ui horizontal header divider">
            { moment(selectedDay).format('LL') }
          </div>
          <div className="row">
            <Cards
              posts={post.posts}
              loadFunc={::this.loadFunc}
              hasMore={post.hasMore}
              isFetching={loading}
              diff={113}
            />
            {loading && isEmpty(post.posts) && (
              <div className="ui segment basic has-header">
                <div className="ui active inverted dimmer">
                  <div className="ui indeterminate text loader">
                    <Translate content="wall.loading" />
                  </div>
                </div>
              </div>
            )}
            {!loading && isEmpty(post.posts) && (
              <div>
                <div className="ui hidden divider"></div>
                <div className="ui segment basic has-header center aligned">
                  <Translate content="post.nodata" />
                </div>
              </div>
            )}
          </div>
        </div>
      </main>
    )
  }
}

@@ -4327,18 +4327,18 @@
 te()) %3E 
-11
+30
 ,%0A      
@@ -4404,10 +4404,10 @@
 ) %3E 
-41
+50
 ,%0A  
@@ -4477,10 +4477,11 @@
 ) %3E 
-8
 1
+00
 %0A   

change thresholds