import React, { Component, UIManager } from 'react'

import {
    Text,
    View,
    TouchableOpacity,
} from 'react-native'

import PickerView from './PickerView'

import BaseDialog from './BaseDialog'

import TimeUtils from '../utils/TimeUtils'

class DatePicker extends BaseDialog {

  static defaultProps = {
    removeSubviews: false,
    itemTextColor: 0x333333ff,
    itemSelectedColor: 0x1097D5ff,
    onPickerCancel: null,
    onPickerConfirm: null,
    unit: ['年', '月', '日'],
    selectedValue: [`${new Date().getFullYear()}年`, `${new Date().getMonth() + 1}月`, `${new Date().getDate()}日`],
    startYear: 1970,
    startMonth: 1,
    startDate: 1,
    endYear: new Date().getFullYear(),

    confirmText: '确定',
    confirmTextSize: 18,
    confirmTextColor: '#0074E1',

    cancelText: '取消',
    cancelTextSize: 18,
    cancelTextColor: '#0074E1',

    itemHeight: 40,

    HH: false,
    mm: false,
    ss: false,
  }

  constructor(props) {
    super(props)
    this.state = this.getDateList(props)
  }

  componentWillReceiveProps(nextProps) {

    if (nextProps.startYear !== this.props.startYear ||
      nextProps.startMonth !== this.props.startMonth ||
      nextProps.startDate !== this.props.startDate) {
      //console.log('nextProps:', nextProps.startYear, this.props.startYear)
      this.setState({ ...this.getDateList(nextProps) })
    }
  }

  getDateList(nextProps) {
    //console.log('getDateList:',this.props)
    const unit = this.props.unit
    const years = []
    const months = []
    const days = []

    const startYear = nextProps.startYear
    const startMonth = nextProps.startMonth
    const startDate = nextProps.startDate
    const endYear = this.props.endYear
    for (let i = 0; i < (endYear + 1) - startYear; i++) {
      years.push(i + startYear + unit[0])
    }

    let selectedYear = years[0]
    if (this.props.selectedValue) {
      selectedYear = this.props.selectedValue[0]
    }
    selectedYear = selectedYear.substr(0, selectedYear.length - unit[0].length)
    //console.log('selectedYear:', selectedYear, new Date().getFullYear(), new Date().getMonth() + 1)
    const endMonth = selectedYear === `${new Date().getFullYear()}`
    && endYear === new Date().getFullYear()
    && selectedYear === `${endYear}`
      ? new Date().getMonth() + 2 : 13
    for (let i = selectedYear === `${startYear}` ? startMonth : 1; i < endMonth; i++) {
      months.push(i + unit[1])
    }

    let selectedMonth = months[0]


    if (this.props.selectedValue) {
      selectedMonth = this.props.selectedValue[1]
    }
    selectedMonth = selectedMonth.substr(0, selectedMonth.length - unit[1].length)

    //console.log('selectedMonth:', selectedMonth, new Date().getMonth() + 1, new Date().getDate())
    //console.log('selectedYear_selectedMonth:', selectedYear, startYear, selectedMonth, startMonth)
    const dayCount = selectedMonth === `${new Date().getMonth() + 1}`
    && endYear === new Date().getFullYear()
    && selectedYear === `${endYear}` ?
          new Date().getDate() : TimeUtils.getDaysInOneMonth(selectedYear, selectedMonth)
    for (let i = selectedYear === `${startYear}` && selectedMonth === `${startMonth}` ? startDate : 1; i <= dayCount; i++) {
      days.push(i + unit[2])
    }

    let selectedDay = days[0]
    if (this.props.selectedValue) {
      selectedDay = this.props.selectedValue[2]
    }
    selectedDay = selectedDay.substr(0, selectedDay.length - unit[2].length)

    pickerData = [years, months, days]

    selectedIndex = [
      years.indexOf(selectedYear + unit[0]) === -1 ? years.length - 1 : years.indexOf(selectedYear + unit[0]),
      months.indexOf(selectedMonth + unit[1]),
      days.indexOf(selectedDay + unit[2]) === -1 ? days.length - 1 : days.indexOf(selectedDay + unit[2])]

    //console.log('checkSelectedMonth:', selectedMonth, months, selectedIndex)
    if (selectedIndex[1] === -1) {
      selectedIndex[1] = 0
    }

    if (selectedIndex[2] === -1) {
      selectedIndex[2] = 0
    }

    this.props.selectedValue[0] = years[selectedIndex[0]]
    this.props.selectedValue[1] = months[selectedIndex[1]]
    this.props.selectedValue[2] = days[selectedIndex[2]]
    if (this.props.HH) {
      const hours = []
      for (let i = 0; i < 24; i++) {
        hours.push(`${i + 1}时`)
      }
      pickerData.push(hours)
      if (this.props.selectedValue) {
        selectedIndex.push((this.props.selectedValue[3] ? parseInt(this.props.selectedValue[3]) : new Date().getHours()) - 1)
      } else {
        selectedIndex.push((new Date().getHours() - 1))
      }
      this.props.selectedValue[3] = `${selectedIndex[3] + 1}时`
      if (this.props.mm) {
        const minutes = []
        for (let i = 0; i < 60; i++) {
          minutes.push(`${i + 1}分`)
        }
        pickerData.push(minutes)
        if (this.props.selectedValue) {
          selectedIndex.push((this.props.selectedValue[4] ? parseInt(this.props.selectedValue[4]) : new Date().getMinutes()) - 1)
        } else {
          selectedIndex.push((new Date().getMinutes() - 1))
        }
        this.props.selectedValue[4] = `${selectedIndex[4] + 1}分`
        if (this.props.ss) {
          const seconds = []
          for (let i = 0; i < 60; i++) {
            seconds.push(`${i + 1}秒`)
          }
          pickerData.push(seconds)
          if (this.props.selectedValue) {
            selectedIndex.push((this.props.selectedValue[5] ? parseInt(this.props.selectedValue[5]) : 1) - 1)
          } else {
            selectedIndex.push(1)
          }
          this.props.selectedValue[5] = `${selectedIndex[5] + 1}秒`
        }
      }
    }
    const data = {
      pickerData,
      selectedIndex,
    }
    return data
  }

  _getContentPosition() {
    return { justifyContent: 'flex-end', alignItems: 'center' }
  }

  renderPicker() {
    return this.state.pickerData.map((item, pickerId) => {
      if (item) {
        return (<PickerView
          key={`picker${pickerId}`}
          itemTextColor={this.props.itemTextColor}
          itemSelectedColor={this.props.itemSelectedColor}
          list={item}
          onPickerSelected={(toValue) => {
                        //是否联动的实现位置
            this.props.selectedValue[pickerId] = toValue
            //console.log('====')
            this.setState({ ...this.getDateList(this.props) })
          }}
          selectedIndex={this.state.selectedIndex[pickerId]}
          fontSize={this.getSize(14)}
          itemWidth={this.mScreenWidth / this.state.pickerData.length}
          itemHeight={this.props.itemHeight}
        />)
      }
    })
  }

  renderContent() {
        // let data = this.getDateList(this.props);
        // this.state.pickerData = data.pickerData;
        // this.state.selectedIndex = data.selectedIndex;
    return (<View
      style={{
        height: this.props.itemHeight * 5 + this.getSize(15) + this.getSize(44), width: this.mScreenWidth,
      }}
    >
      <View style={{ width: this.mScreenWidth, height: this.props.itemHeight * 5 + this.getSize(15), flexDirection: 'row', position: 'absolute', bottom: 0 }}>
        {this.renderPicker()}
      </View>
      <View
        style={{
          width: this.mScreenWidth,
          height: this.getSize(44),
          backgroundColor: '#ffffff',
          flexDirection: 'row',
          justifyContent: 'space-between',
          position: 'absolute',
          top: 0,
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this.dismiss(() => this.props.onPickerCancel && this.props.onPickerCancel(this.props.selectedValue))
          }}
          style={{ width: this.getSize(60), height: this.getSize(44), justifyContent: 'center', alignItems: 'center' }}
        >
          <Text allowFontScaling={false} style={{ fontSize: this.props.cancelTextSize, fontWeight: '400', color: this.props.cancelTextColor }}>{this.props.cancelText}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.dismiss(() => this.props.onPickerConfirm && this.props.onPickerConfirm(this.props.selectedValue))
          }}
          style={{ width: this.getSize(60), height: this.getSize(44), justifyContent: 'center', alignItems: 'center' }}
        >
          <Text allowFontScaling={false} style={{ fontSize: this.props.confirmTextSize, fontWeight: '400', color: this.props.confirmTextColor }}>{this.props.confirmText}</Text>
        </TouchableOpacity>
      </View>
    </View>)
  }
}

export default DatePicker
