import Taro from '@tarojs/taro'
import { View, Text, Picker } from '@tarojs/components'
import dateformat from 'dateformat'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CommonEvent } from '@tarojs/components/types/common'
import { CtsDateSelectorProps } from 'types/date-selector'

/**
 * 月份选择组件
 */
export default class CtsDateSelector extends CtsComponent<CtsDateSelectorProps, {}> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsDateSelectorProps
  public static propTypes: InferProps<CtsDateSelectorProps>

  public constructor(props: CtsDateSelectorProps) {
    super(props)
    this.state = {}
  }

  // ============================= 月份选择器 ====================================
  // 月份选择器选择
  private onMonthChange(e: CommonEvent): void {
    this.props.onChange(e.detail.value)
  }

  // 上月
  private timePrevMonth(): void {
    // 获取上个月
    let d = new Date(this.props.data)
    d.setMonth(d.getMonth() - 1)
    
    this.props.onChange(d)
  }

  // 下月
  private timeLastMonth(): void {
    const { data, onChange } = this.props

    // 最后一个月则点击无效
    if(Taro['common'].isCurrentDate(data, 'M')){
      return
    }

    // 获取下个月
    let d = new Date(data)
    d.setMonth(d.getMonth() + 1)

    onChange(d)
  }

  // ============================= 日期选择器 ====================================
  // 日期选择器选择
  private onDateChange(e: CommonEvent): void {
    this.props.onChange(e.detail.value)
  }

  // 前一天
  private timePrevDay(): void {
    const date = new Date(this.props.data).getTime() - 60 * 60 * 24 * 1000
    this.props.onChange(date)
  }

  // 后一天
  private timeLastDay(): void {
    const { data, onChange } = this.props

    // 最后一天则点击无效
    if(Taro['common'].isCurrentDate(data, 'D')){
      return
    }

    const date = new Date(data).getTime() + 60 * 60 * 24 * 1000
    onChange(date)
  }

  public render(): JSX.Element {
    const { className, mode, data } = this.props
    return (
      <View className={classNames('cts-monthselector', className)}>
        {
          // 月份选择器
          mode === 'month' &&
          (
            <View className='cts-monthselector-home'>
              <View className='time-prev' onClick={this.timePrevMonth}>上月</View>
              <View className='time-choose'>
                {/* 只显示最近3年的数据 */}
                <Picker mode='date' fields='month' value={data} start={Taro['common'].dateFormat(new Date(), 'yyyy-mm', 3)} end={dateformat(new Date(), 'yyyy-mm')} onChange={this.onMonthChange.bind(this)}>
                  <Text>{dateformat(data, 'yyyy年mm月')}</Text>
                  <Text className='iconfont iconicon_xiangxia'></Text>
                </Picker>
              </View>
              <View className={'time-last ' + (Taro['common'].isCurrentDate(data, 'M') ? 'noactive' : 'active')} onClick={this.timeLastMonth}>下月</View>
            </View>
          )
        }

        {
          // 日期选择器
          mode === 'date' &&
          (
            <View className='cts-monthselector-home'>
              <View className='time-prev' onClick={this.timePrevDay}>前一天</View>
                <View className='time-choose'>
                  {/* 只显示最近3年的数据 */}
                  <Picker mode='date' value={data} start={Taro['common'].dateFormat(new Date(), 'yyyy-mm-dd', 3)} end={dateformat(new Date(), 'yyyy-mm-dd')} onChange={this.onDateChange.bind(this)}>
                    <Text>{dateformat(data, 'yyyy年mm月dd日')}</Text>
                    <Text className='iconfont iconicon_xiangxia'></Text>
                  </Picker>
                </View>
                <View className={'time-last ' + (Taro['common'].isCurrentDate(data, 'D') ? 'noactive' : 'active')} onClick={this.timeLastDay}>后一天</View>
            </View>
          )
        }

      </View>
    )
  }
}

CtsDateSelector.defaultProps = {
  mode: 'date',
  data: '',
  onChange() { }
}

CtsDateSelector.propTypes = {
  mode: PropTypes.oneOf(['month','date']),
  data: PropTypes.string,
  onChange: PropTypes.func
}