import { Text, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import type { StateType } from '@/context/ContextShop'
import type { listType } from '@/common/enum'
import { SALE_MODE_SETTING } from '@/common/enum'

interface Params {
  defaultIndex?: number
  onSelect?: (val: listType) => void
  numberObj?: {
    'bulk_number': number
    'length_length': number
    'weight_number': number }
  numberStatus?: boolean
}
export default memo((props: Params) => {
  const { numberStatus = true } = props
  const selectList = SALE_MODE_SETTING
  const { defaultIndex = 0, onSelect, numberObj } = props
  const [index, setIndex] = useState(0)
  useEffect(() => {
    defaultIndex !== index && setIndex(defaultIndex)
  }, [defaultIndex])
  const getName = (item) => {
    return item.title + (numberStatus ? `（${numberObj?.[item.field]}）` : '')
  }
  return <View className={styles.shop_search}>
    {selectList?.map(item => <View key={item.value} onClick={() => onSelect?.(item)} className={classNames(styles.search_item, index === item.value && styles.search_item_select)}>{getName(item)}</View>)}
  </View>
})
