import { View, Image, Text } from '@tarojs/components'
import TDesignIcon from '../tdesign/icon'
import './index.css'

export interface GoodsData {
  id: string
  name?: string
  cover_image?: string
  price?: number
  originPrice?: number
  tags?: string[]
}

interface GoodsCardProps {
  id?: string
  data: GoodsData
  currency?: string
  onClick?: (goods: GoodsData) => void
  onAddCart?: (goods: GoodsData) => void
}

export default function GoodsCard({
  id,
  data,
  currency = '¥',
  onClick,
  onAddCart
}: GoodsCardProps) {
  const independentID = id || `goods-card-${Math.floor(Math.random() * 10 ** 8)}`

  const handleClick = () => {
    onClick?.(data)
  }

  // 移除单独的图片点击事件，改为整个卡片统一处理
  // const handleThumbClick = (e: any) => {
  //   e.stopPropagation()
  //   onThumbClick?.(data)
  // }

  const handleAddCart = (e: any) => {
    e.stopPropagation()
    onAddCart?.(data)
  }

  const formatPrice = (price?: number) => {
    if (!price) return ''
    return price.toFixed(2)
  }

  // const isValidityLinePrice = data.originPrice && data.price && data.originPrice >= data.price

  return (
    <View
      id={independentID}
      className="goods-card"
      onClick={handleClick}
      data-goods={data}
    >
      <View className="goods-card__main">
        {/* 商品图片 */}
        <View className="goods-card__thumb">
          {data.cover_image && (
            <Image
              src={data.cover_image}
              mode="aspectFill"
              className="goods-card__img"
              lazyLoad
            />
          )}
        </View>

        {/* 商品信息 */}
        <View className="goods-card__body">
          <View className="goods-card__upper">
            {/* 商品标题 */}
            {data.name && (
              <Text className="goods-card__title">
                {data.name}
              </Text>
            )}

            {/* 商品标签 */}
            {/* {data.tags && data.tags.length > 0 && (
              <View className="goods-card__tags">
                {data.tags.map((tag, index) => (
                  <Text key={index} className="goods-card__tag">
                    {tag}
                  </Text>
                ))}
              </View>
            )} */}
          </View>

          <View className="goods-card__down">
            {/* 价格区域 */}
            {data.price && (
              <View className="goods-card__price">
                <Text className="goods-card__symbol">{currency}</Text>
                <Text className="goods-card__current-price">
                  {formatPrice(data.price)}
                </Text>
                {/* {data.originPrice && isValidityLinePrice && (
                  <Text className="goods-card__origin-price">
                    {currency}{formatPrice(data.originPrice)}
                  </Text>
                )} */}
              </View>
            )}

            {/* 购物车按钮 */}
            <View className="goods-card__add-cart" onClick={handleAddCart}>
              <TDesignIcon
                name="shopping-cart"
                size="64rpx"
                color="#FA550F"
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}