import type { ITouchEvent } from '@tarojs/components'
import { BaseEventOrig, Image, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useCallback, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { formatHashTag, formatImgUrl } from '@/common/fotmat'
import LabAndImg from '@/components/LabAndImg'
import MCheckbox from '@/components/checkbox'
import Divider from '@/components/divider'
import { usePropsValue } from '@/use/useCommon'

interface ProductItemPropsType {
  item?: any
  openCheckBox: boolean
  event: TaroGeneral.Events
  metaDataId: number // 收藏夹信息包括id
  onCheckedChange: (id: ProductItemPropsType['metaDataId'], item: ProductItemPropsType['metaDataId'], checked: boolean) => void
  filterChecked: (currentId: number, filter?: () => boolean) => number[]
  checked: boolean
}
export const ProductItem = (props: ProductItemPropsType) => {
  const {
    item, openCheckBox, event, metaDataId, onCheckedChange, checked,
  } = props

  const handleClickItem = (e: ITouchEvent) => {
    e.stopPropagation()
    event.trigger('updateCurrentSelection', metaDataId)
    if (openCheckBox) {
      if (checked) {
        onCheckedChange(metaDataId, item.product_id, false)
      }
      else {
        onCheckedChange(metaDataId, item.product_id, true)
      }
    }
    else {
      goLink(`/pages/details/index?id=${item.product_id}`)
    }
  }
  const noop = (e: ITouchEvent) => {
    e.stopPropagation()
  }
  // 选中
  const handleSelect = () => {
    console.log(item)
    onCheckedChange(metaDataId, item.product_id, true)
  }
  // 未选中
  const handleClose = () => {
    onCheckedChange(metaDataId, item.product_id, false)
  }

  return (
    <View onClick={handleClickItem}>
      <Divider direction="horizontal" customStyles={{ margin: '0' }}></Divider>
      <View className={styles.products_item}>
        {openCheckBox
          && <View className={styles.checkbox} onClick={noop}>
            <MCheckbox round size="normal" status={checked} onSelect={handleSelect} onClose={handleClose} ></MCheckbox>
          </View>}
        <View className={styles.item}>
          <View className={styles.item_img}>
            <LabAndImg value={{ lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }} />
            <View className={styles.num}>{item.enable_product_color_count}色</View>
          </View>
          <View className={styles.item_con}>
            <View className={styles.title}><text>{formatHashTag(item.product_code, '')} </text>{item.product_name}</View>
            <View className={styles.tag_list}>
              <View className={styles.tag}>{item.width}</View>
              <View className={styles.tag_g}>{item.weight_density}</View>
            </View>
            <View className={styles.introduce}>{item.component}</View>
          </View>
        </View>
      </View>
    </View>
  )
}

export default ProductItem
