import Taro from '@tarojs/taro'
import { View, Text, Picker, Image } from '@tarojs/components'
import dayjs from 'dayjs'
import classnames from 'classnames'
import { CustomLabel, ItemExtra, UnEditeableView } from '../index'
import arrowImg from '../../assets/ic_arrow_right.png'
import './index.scss'

interface DatePickerProps {
  value?: any
  defaultValue?: any
  help?: string
  hidden?: boolean
  itemExtra?: string
  name: string
  term: string
  onChange?: (value) => void
  editable?: boolean
  required?: boolean
  showTime?: boolean
  onView?: boolean
  listItemChildren?: boolean
}


export default class PickerItem extends Taro.Component<DatePickerProps> {
  datePickerOnChange = (e) => {
    const { value, defaultValue, onChange } = this.props
    const showValue = value || defaultValue
    const timeValue = showValue ? dayjs(showValue).format('YYYY-MM-DD HH:mm').split(' ')[1] : ''
    if (onChange) {
      onChange(dayjs(`${e.detail.value} ${timeValue}`).valueOf())
    }
  }

  timePickerOnChange = (e) => {
    const { value, defaultValue, onChange } = this.props
    const showValue = value || defaultValue
    const dateValue = showValue ? dayjs(showValue).format('YYYY-MM-DD HH:mm').split(' ')[0] : ''
    if (onChange) {
      onChange(dayjs(`${dateValue} ${e.detail.value}`).valueOf())
    }
  }

  render() {
    const {
      term,
      required,
      help,
      hidden,
      value,
      defaultValue
    } = this.props

    if (hidden) {
      return null
    }

    const { editable, itemExtra, showTime, onView, listItemChildren } = this.props
    const disabled = (editable === undefined || editable === true) ? false : true
    const showValue = value || defaultValue || Date.now()
    const dateValue = showValue ? dayjs(showValue).format('YYYY-MM-DD hh:mm').split(' ')[0] : ''
    const timeValue = showValue ? dayjs(showValue).format('YYYY-MM-DD hh:mm').split(' ')[1] : ''

    if (editable === false || (editable === undefined && onView)) {
      const showValue = showTime ? `${dateValue} ${timeValue}` : dateValue
      return <UnEditeableView term={term} help={help} value={showValue} listItemChildren={listItemChildren} />
    }

    const containerCLs = classnames(['date-picker-container', listItemChildren ? 'item-container' : 'item-container-margin'])

    return (
      <View className={containerCLs}>
        <View className='picker-container'>
          <CustomLabel term={term} help={help} required={required} position />
          <Picker
            mode='date'
            onChange={this.datePickerOnChange}
            value={dateValue}
            fields='day'
            disabled={disabled}
          >
            <View className='picker-content'>
              <Text className='picker-text'>{dateValue}</Text>
              <Image
                className="picker-arrow"
                mode="aspectFit"
                src={arrowImg}
              />
            </View>
          </Picker>
        </View>
        {showTime && <View className='picker-container'>
          <CustomLabel term='选择时间' required={required} position />
          <Picker
            mode='time'
            onChange={this.timePickerOnChange}
            value={timeValue}
            disabled={disabled}
          >
            <View className='picker-content'>
              <Text className='picker-text'>{timeValue}</Text>
              <Image
                className="picker-arrow"
                mode="aspectFit"
                src={arrowImg}
              />
            </View>
          </Picker>
        </View>}
        <ItemExtra text={itemExtra} />
      </View>
    )
  }
}