import { CustomWrapper, Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import ColorCheckbox from '../colorCheckbox'
import RecommendProduct from '../recommendProduct'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import Counter from '@/components/counter'
import { formatHashTag, formatPriceDiv } from '@/common/fotmat'
import { debounce } from '@/common/util'
import type { listType } from '@/common/enum'
import { SALE_MODE_SETTING, saleModeType } from '@/common/enum'

export interface ItemType {
  lab: { l: number; a: number; b: number }
  rgb: { r: number; g: number; b: number }
  sale_offset: number
  sale_price: number
  screw_code: string
  screw_color_code: string
  screw_color_id: number
  screw_color_name: string
  screw_id: number
  screw_name: string
  standard_price: number
  texture_url: string
  weight_error: number
  sale_mode_type: 0|1|2
  sale_mode: '大货'|'剪板'|'散剪'
  unit: '条'|'米'
  eunit: 'kg'|'m'
  step: number
  digits: number
  minNum: number
  maxNum: number
  defaultNum: number
}
export interface ProductType {
  colorItem: ItemType
  onChangeNum?: (val: number) => void
}

export default memo((props: ProductType) => {
  return <Index {...props} />
})

const Index = memo((props: ProductType) => {
  const { colorItem, onChangeNum } = props
  const rga = useMemo(() => {
    return { lab: colorItem?.lab, rgb: colorItem?.rgb, texture_url: colorItem?.texture_url, title: colorItem?.screw_color_code }
  }, [colorItem])
  const getCount = debounce((num: number) => {
    setDefaultNum(num)
  }, 300)
  const selectList: listType[] = SALE_MODE_SETTING
  const saleSetting: listType = useMemo(() => {
    console.log('colorItem123123::', colorItem)
    return colorItem && selectList[colorItem.sale_mode_type]
  }, [colorItem?.sale_mode_type])
  const [defaultNum, setDefaultNum] = useState(0)
  useEffect(() => {
    if (colorItem) {
      setDefaultNum(selectList[colorItem.sale_mode_type].defaultNum)
    }
  }, [colorItem?.sale_mode_type])
  useEffect(() => {
    onChangeNum?.(defaultNum)
  }, [defaultNum])
  return <>
    <View className={styles.shop_product_item_con}>
      <View className={styles.shop_product_item}>
        <View className={styles.title_desc}>
          <View className={styles.model}>
            <Text className={styles.name}>{formatHashTag(colorItem?.screw_code, colorItem?.screw_name)}</Text>
            <Text className={styles.label}>{saleSetting?.title}</Text>
          </View>
        </View>
        <View className={styles.item_con}>
          <View className={styles.img}>
            <LabAndImg value={rga}></LabAndImg>
          </View>
          <View className={styles.item_name_price_count}>
            <View className={styles.name_price}>
              <Text>{colorItem?.screw_color_code + colorItem?.screw_color_name}</Text>
              <View className={styles.price}>
                <Text>{(colorItem?.standard_price > colorItem?.sale_price && colorItem.sale_mode_type === 0) && `¥${formatPriceDiv(colorItem?.standard_price)}`}</Text>
                <Text>¥{formatPriceDiv(colorItem?.sale_price)}/kg</Text>
              </View>
            </View>
            <View className={styles.count}>
              <CustomWrapper>
                <Counter
                  onClickBtn={getCount}
                  minNum={saleSetting?.minNum}
                  maxNum={saleSetting?.maxNum}
                  onBlue={getCount}
                  defaultNum={defaultNum}
                  unit={saleSetting?.unit}
                  digits={saleSetting?.digits}
                />
                {/* <Counter onClickBtn={getCount} maxNum={colorItem?.maxNum} minNum={colorItem?.minNum} onBlue={getCount} defaultNum={colorItem?.defaultNum} unit={colorItem?.sale_mode_type === 0 ? '条' : '米'} /> */}
              </CustomWrapper>
            </View>
          </View>
        </View>
      </View>
    </View>
  </>
})
