import { Text, View } from '@tarojs/components'
import { memo, useMemo, useState } from 'react'
import PopupSelectColor from '../popupSelectColor'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import Checkbox from '@/components/checkbox'
import { formatHashTag } from '@/common/fotmat'

interface ProductItemParamType {
  code: string
  id: number
  name: string
}

export interface ParamItem {
  code: string
  id: number
  affiliation_product: ProductItemParamType[]
  color_card_name: string
  texture_url: string
  lab: { l: number; a: number; b: number }
  rgb: { r: number; g: number; b: number }
  is_add: boolean
  count?: number
  component: string
  craft: string
  describe: string
  hexadecimal_code: string
  is_favorite: boolean
  kind_code: string
  kind_id: number
  kind_name: string
  name: string
  product_color_count: number
  product_screw_id: number
  weight_density: string
  width: string
}
export interface ParamType {
  productItem: ParamItem
  onSelect?: (val: ParamItem|null) => void
  selected: boolean
}

export default memo((props: ParamType) => {
  const { productItem = null, selected = false } = props
  const [checkStatus, setCheckStatus] = useState(false)
  const changeSelect = () => {
    setCheckStatus(!checkStatus)
    props.onSelect?.(productItem)
  }
  const onSelect = () => {
    props.onSelect?.(productItem)
    setCheckStatus(true)
  }
  const labAndImgObj = useMemo(
    () => {
      return { lab: productItem?.lab, rgb: productItem?.rgb, texture_url: productItem?.texture_url }
    },
    [productItem],
  )
  return <View className={styles.get_card_item} onClick={changeSelect}>
    <View className={styles.image}>
      <LabAndImg value={labAndImgObj} />
      <Text>{productItem?.product_color_count}色</Text>
    </View>
    <View className={styles.card_info}>
      <View className={styles.card_info_name}>{formatHashTag(productItem?.code, productItem?.name)}</View>
      <View className={styles.card_info_label}>
        {new Array(2).fill('').map(item => <Text key={item.id}>170CM</Text>)}
      </View>
      <View className={styles.desc}>{productItem?.craft}</View>
    </View>
    <View className={styles.checkBox} onClick={e => e.stopPropagation()}>
      <View className={styles.add_btn} onClick={() => onSelect()}>{selected ? '继续添加' : '添加'}</View>
    </View>

  </View>
})
