import React, { useMemo } from 'react';
import classNames from 'classnames';
import GridLayout from "../gridLayout";
import { image as imageAli, locales } from '@pisell/utils';
import { Skeleton } from 'antd';
import Decimal from 'decimal.js';
import "./index.less";
import PisellPriceText from "../pisellPriceText";

// 装修端配置项均为 isXXX，这里先适配一部分

var ProductGroup = function ProductGroup(_ref) {
  var data = _ref.data,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? {
      grid: false
    } : _ref$layout,
    onSelectProduct = _ref.onSelectProduct,
    currentProductId = _ref.currentProductId,
    _ref$isProductCover = _ref.isProductCover,
    isProductCover = _ref$isProductCover === void 0 ? 1 : _ref$isProductCover,
    _ref$imgWidth = _ref.imgWidth,
    imgWidth = _ref$imgWidth === void 0 ? '180px' : _ref$imgWidth,
    _ref$imgHeight = _ref.imgHeight,
    imgHeight = _ref$imgHeight === void 0 ? '126px' : _ref$imgHeight,
    _ref$radius = _ref.radius,
    radius = _ref$radius === void 0 ? 8 : _ref$radius,
    _ref$isTitle = _ref.isTitle,
    isTitle = _ref$isTitle === void 0 ? 1 : _ref$isTitle,
    _ref$isSubtitle = _ref.isSubtitle,
    isSubtitle = _ref$isSubtitle === void 0 ? 0 : _ref$isSubtitle,
    _ref$showSpec = _ref.showSpec,
    showSpec = _ref$showSpec === void 0 ? true : _ref$showSpec,
    _ref$isTag = _ref.isTag,
    isTag = _ref$isTag === void 0 ? 0 : _ref$isTag,
    _ref$isPrice = _ref.isPrice,
    isPrice = _ref$isPrice === void 0 ? 0 : _ref$isPrice,
    _ref$isOriginPrice = _ref.isOriginPrice,
    isOriginPrice = _ref$isOriginPrice === void 0 ? 0 : _ref$isOriginPrice,
    _ref$showZeroPrice = _ref.showZeroPrice,
    showZeroPrice = _ref$showZeroPrice === void 0 ? false : _ref$showZeroPrice,
    _ref$showMarketingTag = _ref.showMarketingTag,
    showMarketingTag = _ref$showMarketingTag === void 0 ? true : _ref$showMarketingTag,
    _ref$showRemark = _ref.showRemark,
    showRemark = _ref$showRemark === void 0 ? true : _ref$showRemark,
    _ref$isStock = _ref.isStock,
    isStock = _ref$isStock === void 0 ? 0 : _ref$isStock;
  var _products = useMemo(function () {
    var products = data.products;
    return products;
  }, [data]);
  var getStockText = function getStockText(item) {
    if (item.is_track === 0) {
      return false;
    }
    return "".concat(locales.getText('pisell2.product-select.stock'), "\uFF1A").concat(item.stock_quantity);
  };

  // 获取商品名称的前两个字符作为文字封面
  var getTextCover = function getTextCover(title) {
    if (!title) return '';
    // 移除首尾空格并取前两个字符
    var cleanTitle = title.trim();
    if (cleanTitle.length === 0) return '';

    // 取前两个字符（无论是中文、英文还是其他字符）
    return cleanTitle.substring(0, 2).toUpperCase();
  };
  var renderPrice = function renderPrice(item) {
    var _price = item.price,
      _original_price = item.original_price,
      is_bundle = item.is_bundle,
      minimum_markup_price = item.minimum_markup_price;
    var price = _price;
    var original_price = _original_price;
    if (is_bundle) {
      price = new Decimal(price).plus(new Decimal(minimum_markup_price)).toFixed(2);
      original_price = new Decimal(original_price).plus(new Decimal(minimum_markup_price)).toFixed(2);
    }
    if (!showZeroPrice && !parseFloat(price)) return null;
    return !!isPrice || !!isOriginPrice ? /*#__PURE__*/React.createElement("div", {
      className: "price-info"
    }, isPrice ? /*#__PURE__*/React.createElement("div", {
      className: "price"
    }, /*#__PURE__*/React.createElement(PisellPriceText, {
      value: price,
      isMini: is_bundle
    })) : null, !!isOriginPrice && parseFloat(original_price) ? /*#__PURE__*/React.createElement("div", {
      className: "original-price"
    }, /*#__PURE__*/React.createElement(PisellPriceText, {
      value: original_price,
      isMini: is_bundle
    })) : null) : null;
  };
  var renderItem = function renderItem(item) {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('product-card', {
        selected: currentProductId && item.id === currentProductId
      }),
      onPointerUp: function onPointerUp() {
        console.log('进入 renderItem onClick');
        onSelectProduct === null || onSelectProduct === void 0 || onSelectProduct(item);
      }
    }, isProductCover ? /*#__PURE__*/React.createElement("div", {
      className: "card-left",
      style: {
        width: imgWidth || 'auto',
        height: imgHeight || 'auto'
      }
    }, item.cover ? /*#__PURE__*/React.createElement("img", {
      loading: "lazy",
      src: imageAli.ali(item.cover, 360),
      style: {
        borderRadius: radius
      }
    }) : /*#__PURE__*/React.createElement("div", {
      className: "text-cover",
      style: {
        borderRadius: radius
      }
    }, getTextCover(item.title))) : null, /*#__PURE__*/React.createElement("div", {
      className: "card-right"
    }, !!isTitle ? /*#__PURE__*/React.createElement("div", {
      className: "title"
    }, item.title) : null, !!isSubtitle && item.subtitle ? /*#__PURE__*/React.createElement("div", {
      className: "subtitle"
    }, item.subtitle) : null, !!isStock && !!item.is_track ? /*#__PURE__*/React.createElement("div", {
      className: "stock"
    }, getStockText(item)) : null, renderPrice(item)));
  };
  return /*#__PURE__*/React.createElement("div", {
    "data-section": data.id,
    className: "pisell-product-select-group"
  }, /*#__PURE__*/React.createElement("div", {
    className: "group-title"
  }, data.name), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '16px 0'
    }
  }, layout !== null && layout !== void 0 && layout.grid && layout.config ? /*#__PURE__*/React.createElement(GridLayout, {
    gridConfig: layout.config,
    items: _products,
    renderItem: renderItem
  }) : /*#__PURE__*/React.createElement("div", {
    className: "group-row"
  }, _products.map(function (item) {
    return renderItem(item);
  }))));
};
export var ProductGroupSkeleton = function ProductGroupSkeleton(_ref2) {
  var layout = _ref2.layout;
  var renderItem = function renderItem() {
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('product-card')
    }, /*#__PURE__*/React.createElement(Skeleton.Image, {
      active: true,
      style: {
        width: 180,
        height: 126
      }
    }), /*#__PURE__*/React.createElement(Skeleton, {
      active: true,
      paragraph: {
        rows: 2
      }
    }));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-product-select-group"
  }, /*#__PURE__*/React.createElement(Skeleton.Input, {
    active: true,
    size: "small",
    block: false
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '16px 0'
    }
  }, layout !== null && layout !== void 0 && layout.grid && layout.config ? /*#__PURE__*/React.createElement(GridLayout, {
    gridConfig: layout.config,
    items: [1, 2],
    renderItem: renderItem
  }) : /*#__PURE__*/React.createElement("div", {
    className: "group-row"
  }, [1, 2, 3].map(function (item) {
    return renderItem();
  }))));
};
export default ProductGroup;