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

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsPickerProps, CtsPickerState } from 'types/picker'

/**
 * Picker扩展组件，支持二列
 */
export default class CtsPicker extends CtsComponent<CtsPickerProps, CtsPickerState> {
  // static options = {
  //   addGlobalClass: true
  // }

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

  public constructor(props: CtsPickerProps) {
    super(props)
    this.state = {
      chooseIndex: [],
      currentRange: []
    }
  }

  public componentWillReceiveProps(props: CtsPickerProps): void {
    let { value, mode, range } = props

    // 更新数据
    let chooseIndex: any = [] // 一级二级选中索引
    if (mode === 'selector') {
      range.forEach((item, key) => {
        if (range[key].value === value) {
          chooseIndex = Number(key)
        }
      })
    } else if (mode === 'multiSelector' && range.length > 0) {
      let range1 = range
      let range2 = range[0].child
      value = value || []

      range1.forEach((item, key) => {
        if (range1[key].value === value[0]) {
          chooseIndex[0] = Number(key)
          range2 = range1[key].child
        }
      })
      range2.forEach((item, key) => {
        if (range2[key].value === value[1]) {
          chooseIndex[1] = Number(key)
        }
      })
      range = [range1, range2]
    }

    this.setState({
      currentRange: range,
      chooseIndex
    })
  }

  // 列改变时触发
  private onColumnChange(e) {
    let { chooseIndex, currentRange } = this.state
    const { mode, range } = this.props

    if (mode === 'multiSelector') {
      if (e.detail.column === 0) {
        chooseIndex[0] = e.detail.value
        currentRange[1] = range[e.detail.value].child
      }
      if (e.detail.column === 1) {
        chooseIndex[1] = e.detail.value
      }
      this.setState({
        chooseIndex,
        currentRange
      })
    }

  }

  // 选中事件
  private handleChange(e) {
    const { currentRange } = this.state
    const { mode } = this.props
    // console.log(e)

    let val: any = 0
    if (mode === 'selector') {
      val = Number(e.detail.value)
      this.props.onChange(currentRange[val].value)
    } else if (mode === 'multiSelector') {
      val = e.detail.value
      this.props.onChange([currentRange[0][val[0]].value, currentRange[1][val[1]].value])
    }
  }

  public render(): JSX.Element {
    let { chooseIndex, currentRange } = this.state
    let { className, value, note, mode, rangeKey, placeholder, disabled } = this.props

    // 更新数据
    let rangeData1: any = {} // 一级数据
    let rangeData2: any = {} // 二级数据
    if (mode === 'selector') {
      currentRange.forEach((item, key) => {
        rangeData1[currentRange[key].value] = currentRange[key].name
      })
    } else if (mode === 'multiSelector' && currentRange.length > 0) {
      console.log('currentRange', currentRange)
      let range1 = currentRange[0]
      let range2 = currentRange[1]
      value = value || []
      // console.log(value, range1, range2)

      range1.forEach((item, key) => {
        rangeData1[range1[key].value] = range1[key].name
      })
      range2.forEach((item, key) => {
        rangeData2[range2[key].value] = range2[key].name
      })
    }

    return (
      <Picker className={classNames(className)} mode={mode} value={chooseIndex} range={currentRange} rangeKey={rangeKey} onChange={this.handleChange.bind(this)} onColumnChange={this.onColumnChange.bind(this)} disabled={disabled}>
        <View className='picker'>
          {
            mode === 'selector' &&
            <Text className='text'>
              {
                 currentRange.length > 0 && value ?
                  (note ? note.replace('{name}', rangeData1[value]) : rangeData1[value])
                  :
                  placeholder
              }
            </Text>
          }

          {
            mode === 'multiSelector' &&
            <Text className='text'>
              {
                 currentRange.length > 0 && value.length > 0 && value[0] && value[1] ?
                  (note ? note.replace('{name}', value) : `${rangeData1[value[0]] || ''}${rangeData2[value[1]] ? `(${rangeData2[value[1]]})` : ''}`)
                  :
                  placeholder
              }
            </Text>
          }

          {
            !disabled &&
            <Text className='iconfont iconicon_jiantou'></Text>
          }
        </View>
      </Picker>
    )
  }
}

CtsPicker.defaultProps = {
  value: null,
  note: '',
  mode: 'selector',
  range: [],
  rangeKey: '',
  placeholder: '',
  disabled: false,
  onChange() { }
}

CtsPicker.propTypes = {
  value: PropTypes.any,
  note: PropTypes.string,
  mode: PropTypes.oneOf(['selector', 'multiSelector']),
  range: PropTypes.array,
  rangeKey: PropTypes.string,
  placeholder: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func
}