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

interface ProductItemParamType {
  code: string
  id: number
  name: string
}
export interface ParamType {
  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
  onSelect?: (val: ParamType, status: boolean) => void
  count?: number
}

export default memo((props: ParamType) => {
  const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props
  const [checkStatus, setCheckStatus] = useState(false)
  const changeSelect = () => {
    setCheckStatus(!checkStatus)
    props.onSelect?.(props, !checkStatus)
  }
  const onSelect = () => {
    props.onSelect?.(props, true)
    setCheckStatus(true)
  }
  const onClose = () => {
    props.onSelect?.(props, false)
    setCheckStatus(false)
  }
  const labAndImgObj = useMemo(
    () => {
      return { lab: props.lab, rgb: props.rgb, texture_url: props.texture_url }
    },
    [props],
  )
  return <View className={styles.get_card_item} onClick={changeSelect}>
    <View className={styles.image}>
      <LabAndImg value={labAndImgObj} />
      {affiliation_product.length > 1 && <Text>多面料共用</Text>}
    </View>
    <View className={styles.card_info}>
      <View className={styles.card_info_name}>{color_card_name}</View>
      <View className={styles.card_info_label}>
        {affiliation_product?.map(item => <Text key={item.id}>{item.code}</Text>)}
      </View>
    </View>
    <View className={styles.checkBox} onClick={e => e.stopPropagation()}>
      <Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add} onSelect={onSelect} onClose={onClose} />
    </View>
  </View>
})
