import { Text, View } from '@tarojs/components'
import classNames from 'classnames'
import { memo, useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'

interface ItemIndex {
  value: number
  label: string
}
interface Param {
  defaultIndex?: number
  onSelect?: (val: number) => void
  list: ItemIndex[]
}
export default memo((props: Param) => {
  const { defaultIndex = 1, onSelect, list = [] } = props
  const [selectIndex, setSelectIndex] = useState(0)
  useEffect(() => {
    if (defaultIndex != selectIndex) { setSelectIndex(() => defaultIndex) }
  }, [defaultIndex])
  const getSelect = useCallback((index) => {
    setSelectIndex(() => index)
    onSelect?.(index)
  }, [])
  return <View className={styles.select_list} >
    {list?.map((item) => {
      return <View key={item.value} onClick={() => getSelect(item.value)} className={classNames(styles.select_list_item, selectIndex === item.value && styles.select_list_ed)}><Text>{item.label}</Text></View>
    })}
  </View>
})
