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

interface SortType { value: -1|1|-2|2; title: string }
interface ParamType {
  onSelect: (val: SortType) => void
  onChange: (val: boolean) => void
}
export default memo((props: ParamType) => {
  const { onSelect } = props
  const [open, setOpen] = useState(false)
  const sort_data: SortType[] = [
    { value: -1, title: '添加时间降序' },
    { value: 1, title: '添加时间升序' },
    { value: -2, title: '面料编号降序' },
    { value: 2, title: '面料编号升序' },
  ]
  const [selectData, setSelectData] = useState<SortType>({
    value: -1, title: '添加时间降序',
  })
  const getSelect = (item) => {
    setOpen(false)
    onSelect(item)
    setSelectData(item)
  }
  const [status, setStatus] = useState(false)
  const onChange = () => {
    setStatus(!status)
    props.onChange?.(!status)
  }
  return <><View className={styles.shop_header_sort_main}>
    <View className={styles.shop_header_sort}>
      <View className={styles.sort} onClick={() => setOpen(true)}>
        <IconFont name="icon-paixu1" size={30} color="#337FFFFF" />
        <Text>{selectData.title}</Text>
        <IconFont name="icon-zhankai" size={30} color="#337FFFFF" />
      </View>
      <View className={styles.edit} onClick={onChange}>
        <IconFont name="icon-guanli" size={43} color={`${status ? '#337FFFFF' : '#000000FF'}`} />
        <Text style={{ color: `${status ? '#337FFFFF' : '#000000FF'}` }}>{status ? '取消' : '管理'}</Text>
      </View>
    </View>
    <View className={classNames(styles.sort_list, open && styles.sort_list_selected)}>
      {sort_data.map(item => <View key={item.value} onClick={() => getSelect(item)} className={classNames(styles.item_sort, (selectData.value === item.value) && styles.search_item_select)}>{item.title}</View>)}
    </View>
  </View>
  {open && <View className={styles.mask} onClick={() => setOpen(false)}></View>}
  </>
})
