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

interface Param {
  open: boolean
  onOpenClick?: (val: boolean) => void
  onSelect?: (id: number) => void
  list?: { name: string; id: number }[]
  defaultSelectId: number
}

type ParamProduct = Omit<Param, 'open'>

const ProductClassLine = memo((option: ParamProduct) => {
  const { onOpenClick, defaultSelectId = 0, onSelect, list = [] } = option
  const [selectInfo, setSelectInfo] = useState({
    selected: 0, // 当前选中的id
    tabId: 0, // 需要滚动到的id
  })

  console.log('刷新了')

  useEffect(() => {
    let data: { item: any; index: number } = { item: null, index: 0 }
    list?.forEach((item, index) => {
      if (item.id == defaultSelectId) {
        data = { item, index }
      }
    })
    if (data.item) {
      const num = data.index > 0 ? data.index - 1 : 0
      console.log('获取数据：：', list[num].id)
      setSelectInfo(e => ({ ...e, tabId: list[num].id, selected: data.item.id }))
    }
  }, [defaultSelectId, list])

  const clickEvent = ({ item, index }: { item: any; index: number }) => {
    const num = index > 0 ? index - 1 : 0
    setSelectInfo(e => ({ ...e, tabId: list[num].id, selected: item.id }))
    onSelect?.(item.id)
  }

  return (
    <View className={styles.product_class_main_line}>
      <ScrollView scrollX scrollWithAnimation className={styles.product_class_scroll} scrollIntoView={`tabs_${selectInfo.tabId}`}>
        <View className={styles.product_class_list}>
          {list?.map((item, index) => (
            <View
              id={`tabs_${item.id}`}
              className={classnames(styles.product_class_item, item.id == selectInfo.selected ? styles.product_class_item_selected : '')}
              onClick={() => clickEvent({ item, index })}
              key={item.id}
            >
              {item.name}
            </View>
          ))}
        </View>
      </ScrollView>
      <View className={styles.product_class_more} onClick={() => onOpenClick?.(true)}>
        <IconFont name="icon-zhankai" color="#000000" size={40} customClassName={styles.zhankai}></IconFont>
      </View>
    </View>
  )
})

ProductClassLine.displayName = 'ProductClassLine'

const ProductClassBlock = (option: ParamProduct & { open: boolean }) => {
  const { onOpenClick, defaultSelectId = 0, onSelect, list = [], open } = option
  const [selectInfo, setSelectInfo] = useState(0)

  useEffect(() => {
    setSelectInfo(defaultSelectId)
  }, [defaultSelectId])

  const clickEvent = (item) => {
    setSelectInfo(item.id)
    onSelect?.(item.id)
  }
  return (
    <>
      <View className={styles.product_class_main_block} style={{ display: open ? 'block' : 'none' }}>
        <View className={styles.product_class_block_con}>
          <ScrollView scrollY className={styles.product_class_scroll}>
            <View className={styles.product_class_list}>
              {list?.map(item => (
                <View
                  className={classnames(styles.product_class_item, item.id == selectInfo ? styles.product_class_item_selected : '')}
                  onClick={() => clickEvent(item)}
                  key={item.id}
                >
                  {item.name}
                </View>
              ))}
            </View>
          </ScrollView>
          <View className={styles.product_class_close} onClick={() => onOpenClick?.(false)}>
            点击收起<IconFont name="icon-shouqi" color="#000000" size={40} customClassName={styles.shouqi}></IconFont>
          </View>
        </View>
        <View className={styles.product_class_block_mask} onClick={() => onOpenClick?.(false)}></View>
      </View>
    </>
  )
}

const PrcductSub = (option: Param) => {
  const { open = false, onOpenClick, onSelect, list, defaultSelectId } = option
  const getSelect = useCallback((id) => {
    onSelect?.(id)
  }, [])
  const openClick = useCallback((val) => {
    onOpenClick?.(val)
  }, [])
  return (
    <>
      <View className={styles.class_main}>
        <ProductClassLine list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassLine>
        <ProductClassBlock open={open} list={list} defaultSelectId={defaultSelectId} onSelect={getSelect} onOpenClick={openClick}></ProductClassBlock>
      </View>
    </>
  )
}
export default PrcductSub
