import { Text, View } from '@tarojs/components'
import { useCallback } from 'react'
import styles from './index.module.scss'
import Counter from '@/components/counter'
import LabAndImg from '@/components/LabAndImg'
import { formatHashTag } from '@/common/fotmat'

export interface ProductParam {
  code: string
  lab: { l: number; a: number; b: number }
  name: string
  product_colors: ColorParam[]
  product_id: number
  rgb: { r: number; g: number; b: number }
  texture_url: string
}

export interface ColorParam {
  code: string
  color_num: number
  lab: { l: number; a: number; b: number }
  name: string
  product_color_id: number
  rgb: { r: number; g: number; b: number }
  texture_url: string
}

interface Param {
  value: ProductParam[]
}

export default (props: Param) => {
  const { value } = props
  const labAndImgObj = useCallback(
    (item) => {
      return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
    },
    [value],
  )
  return <>
    {value?.map((pitem) => {
      return <View key={pitem.product_id} className={styles.card_con}>
        <View className={styles.card_header}>{formatHashTag(pitem.code, pitem.name)}</View>
        <View className={styles.card_list}>
          <>
            {pitem.product_colors?.map((citem, index) => {
              return <View key={index} className={styles.card_item}>
                <View className={styles.img}><LabAndImg value={labAndImgObj(citem)} /></View>
                <View className={styles.name_count}>
                  <Text>{formatHashTag(citem.code, citem.name)}</Text>
                  <Text>x{citem.color_num}份</Text>
                </View>
              </View>
            })}
            <View className={styles.express_btn}>快递到付</View>
          </>
        </View>
      </View>
    })}
  </>
}
