import React, { useEffect, useState } from 'react'
import { useImmer } from 'use-immer'
import { useSelector } from 'react-redux'
import { useAsyncCallback } from '@/hooks'
import Taro from '@tarojs/taro'
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
import './picker-select.scss'

const initialState = {
  source: [],
  value: 0,
  markMultiDateTime: false
}
function PickerDateTime (props) {
  const { handleConfirm, onPickerCancel, list = [] } = props
  const dateTime = [
    { mode: 'year', unit: '年' },
    { mode: 'month', unit: '月' },
    { mode: 'day', unit: '日' },
  ]
  // const [state, setState] = useAsyncCallback({ source: props.list || [], value: props.value || '' })
  // const [state, setState] = useImmer({ value: [props.value || 0] })
  // const { source, value } = state
  const [value, setState] = useState(props.value || [0])

  const onChange = (e) => {
    // const _value = [...value]
    // _value[index] = e.detail.value
    // const { source, value } = state
    // source.item[]

    setState(
      e.detail.value
      // ({ source, value }) => {
      // const res = []
      // for (let i = 0; i < source.length; i++) {
      //   let time = '',
      //     token = ''
      //   // source[i].item.length为可选项的列数
      //   for (let j = 0; j < source[i].item.length; j++) {
      //     const select = source[i].item[j][value[i][j]]
      //     time += (select === '今天' ? dayjs().format('M月D日') : select) + '-'
      //     // 对于二维数组取i、j；对于一维数组取j
      //     const item = markMultiDateTime ? dateTime[i][j] : dateTime[j]
      //     token += (item.format || getToken(item.mode)) + '-'
      //   }
      //   res.push(dayjs(time, token)[mode]())
      // }
      // return markMultiDateTime ? res : res[0]
      // const res = source.map((item, index) => item[value[index]])
      // const cur = getDayjs()
      // const source2 = dateTime && format(dateTime, dayjs(start))
      // console.log('source2:', source2)
      // }
    )
  }
  const handleClick = () => {
    onPickerCancel()
    handleConfirm(list[value[0]], value[0])
  }
  return (
    <View className='picker-custom'>
      <PickerView
        indicator-style='height: 40px;'
        value={value}
        onChange={(e) => onChange(e)}
        immediateChange
      // 使用acc.concat将多维数组打平成一维数组再求数组长度
      >
        <PickerViewColumn>
          {list.map((item, elementIndex) => (
            <View key={'list' + elementIndex} >{item.text}</View>
          ))}
        </PickerViewColumn>
      </PickerView>
      <View className="picker-btn" onClick={handleClick}>确定</View>
    </View>
  )
}

PickerDateTime.options = {
  addGlobalClass: true
}

export default React.memo(PickerDateTime)