import { View } from '@tarojs/components'
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import DropDownItem from '../dropDown-item'
import FilterButton from '../filterButton'
import styles from './index.module.scss'
import { EnumCutSampleOrderStatus } from '@/api/sampleCutting'

type ChangedValue = string | number

interface SelectSaleTypeProps {
  onChange?: (value: ChangedValue) => void
  onCloseOverlay?: () => void
  defaultValue?: ChangedValue
}

interface EnumList {
  id: number
  code: string
  name: string
}
// 剪样订单状态
const SelectSampleCuttingStatus = (props: SelectSaleTypeProps, ref) => {
  const selectName = '剪样订单状态'
  const { onChange, defaultValue = 0 } = props
  console.log(props)
  const { fetchData } = EnumCutSampleOrderStatus()
  const [enumList, setEnumList] = useState<EnumList[]>([])

  const getData = async() => {
    const res = await fetchData()
    setEnumList([{ id: 0, code: '', name: '全部记录' }, ...res.data.list])
  }

  useEffect(() => {
    getData()
  }, [])

  const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)

  const handleClick = (value: ChangedValue) => {
    setCurrentValue(value)
    onChange?.(value)
  }

  const dropDownRef = useRef<any>(null)

  useImperativeHandle(
    ref,
    () => {
      return {
        show: dropDownRef.current.show,
        showPopup: dropDownRef.current.showPopup,
        closePopup: dropDownRef.current.closePopup,
      }
    },
    [dropDownRef.current],
  )

  return (
    <View className={styles.tab_bar}>
      {!!enumList.length
          && enumList.map((item: EnumList, key) => {
            return (
              <FilterButton round customClassName={styles.button} key={key} size="small" isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
                {item.name}
              </FilterButton>
            )
          })}
    </View>
  )
}
export default memo(forwardRef(SelectSampleCuttingStatus))
