function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useMemo } from 'react';
import { Iconfont } from '@pisell/materials';
import { image as imageAli, locales } from '@pisell/utils';
import classNames from 'classnames';
import useEngineContext from "../../../../hooks/useEngineContext";
import localeTexts from "./locales";
import useThemeTokens from "../../../../hooks/useThemeTokens";
import "./index.less";
var SKUCard = function SKUCard(_ref) {
  var _context$appHelper, _skuCardConfig$title, _skuCardConfig$subTit, _skuCardConfig$price, _skuCardConfig$image, _skuCardConfig$disabl, _skuCardConfig$disabl2;
  var cover = _ref.cover,
    title = _ref.title,
    subtitle = _ref.subtitle,
    price = _ref.price,
    arrow = _ref.arrow,
    selected = _ref.selected,
    disabled = _ref.disabled,
    _onClick = _ref.onClick,
    renderRight = _ref.renderRight,
    skuCardConfig = _ref.skuCardConfig,
    skuDisabled = _ref.skuDisabled,
    theme = _ref.theme;
  var _useThemeTokens = useThemeTokens(theme),
    colorPrimary = _useThemeTokens.colorPrimary,
    colorPrimaryBg = _useThemeTokens.colorPrimaryBg;
  var context = useEngineContext();
  var language = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get('umi_locale')) || 'en';
  locales.init(localeTexts, language);

  /**
   * 计算主标题样式
   * 默认全部展示，可换行；如果配置了 lineClamp 则限制行数
   */
  var titleStyle = useMemo(function () {
    var config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.title;
    var style = {};
    if (disabled) {
      style.color = '#98A2B3';
    } else if (config !== null && config !== void 0 && config.color) {
      style.color = config.color;
    }
    if (config !== null && config !== void 0 && config.fontSize) {
      style.fontSize = config.fontSize;
    }
    if (config !== null && config !== void 0 && config.fontWeight) {
      style.fontWeight = config.fontWeight;
    }

    // 只有配置了 lineClamp 才应用截断样式
    if (config !== null && config !== void 0 && config.lineClamp && (config === null || config === void 0 ? void 0 : config.lineClamp) > 0) {
      style.display = '-webkit-box';
      style.WebkitLineClamp = config.lineClamp;
      // @ts-ignore
      style.lineClamp = config.lineClamp;
      style.WebkitBoxOrient = 'vertical';
      style.overflow = 'hidden';
    }
    return style;
  }, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.title, disabled]);

  /**
   * 计算副标题样式
   * 默认展示两行（CSS 中已设置），如果配置了其他 lineClamp 值则覆盖
   */
  var subTitleStyle = useMemo(function () {
    var config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.subTitle;
    var style = {};
    if (disabled) {
      style.color = '#98A2B3';
    } else if (config !== null && config !== void 0 && config.color) {
      style.color = config.color;
    }
    if (config !== null && config !== void 0 && config.fontSize) {
      style.fontSize = config.fontSize;
    }
    if (config !== null && config !== void 0 && config.fontWeight) {
      style.fontWeight = config.fontWeight;
    }

    // 如果配置了 lineClamp 则覆盖 CSS 默认的 2 行
    if (config !== null && config !== void 0 && config.lineClamp && (config === null || config === void 0 ? void 0 : config.lineClamp) > 0) {
      style.WebkitLineClamp = config.lineClamp;
      // @ts-ignore
      style.lineClamp = config.lineClamp;
    }
    return style;
  }, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.subTitle, disabled]);

  /**
   * 计算价格样式
   */
  var priceStyle = useMemo(function () {
    var config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price;
    var style = {};
    if (disabled) {
      style.color = '#98A2B3';
    } else if (config !== null && config !== void 0 && config.color) {
      style.color = config.color;
    }
    if (config !== null && config !== void 0 && config.fontSize) {
      style.fontSize = config.fontSize;
    }
    if (config !== null && config !== void 0 && config.fontWeight) {
      style.fontWeight = config.fontWeight;
    }
    return style;
  }, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.price, disabled]);

  /**
   * 计算图片样式
   */
  var imageStyle = useMemo(function () {
    var config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.image;
    var style = {};
    if (config !== null && config !== void 0 && config.width) {
      style.width = config.width;
    }
    if (config !== null && config !== void 0 && config.height) {
      style.height = config.height;
    }
    if ((config === null || config === void 0 ? void 0 : config.borderRadius) !== undefined) {
      style.borderRadius = typeof config.borderRadius === 'number' ? "".concat(config.borderRadius, "px") : config.borderRadius;
    }
    if (config !== null && config !== void 0 && config.border) {
      style.border = config.border;
    }
    return style;
  }, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.image]);

  /** 计算disabled文本样式 */
  var disabledTextStyle = useMemo(function () {
    var config = skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.disabledText;
    var style = {};
    if (config !== null && config !== void 0 && config.color) {
      style.color = config.color;
    }
    if (config !== null && config !== void 0 && config.fontSize) {
      style.fontSize = config.fontSize;
    }
    if (config !== null && config !== void 0 && config.fontWeight) {
      style.fontWeight = config.fontWeight;
    }
    return style;
  }, [skuCardConfig === null || skuCardConfig === void 0 ? void 0 : skuCardConfig.disabledText]);

  /** 是否显示主标题 */
  var showTitle = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$title = skuCardConfig.title) === null || _skuCardConfig$title === void 0 ? void 0 : _skuCardConfig$title.visible) !== false;
  /** 是否显示副标题 */
  var showSubTitle = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$subTit = skuCardConfig.subTitle) === null || _skuCardConfig$subTit === void 0 ? void 0 : _skuCardConfig$subTit.visible) !== false;
  /** 是否显示价格 */
  var showPrice = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$price = skuCardConfig.price) === null || _skuCardConfig$price === void 0 ? void 0 : _skuCardConfig$price.visible) !== false;
  /** 是否显示图片 */
  var showImage = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$image = skuCardConfig.image) === null || _skuCardConfig$image === void 0 ? void 0 : _skuCardConfig$image.visible) !== false;
  /** 是否显示disabled文本 */
  var showDisabledText = (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$disabl = skuCardConfig.disabledText) === null || _skuCardConfig$disabl === void 0 ? void 0 : _skuCardConfig$disabl.visible) !== false;

  // 如果没有cover，则使用title前两个字符用于显示占位
  var titleText = useMemo(function () {
    if (!title) return '';
    // 如果title长度小于2，则使用title
    if (title.length < 2) {
      return title.toUpperCase();
    }
    return title.substring(0, 2).toUpperCase();
  }, [title]);
  console.log('disabledTextStyle >>>>>>>>>', disabledTextStyle);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-pro-cards-sku-card', {
      'pisell-pro-cards-sku-card-active': selected,
      'pisell-pro-cards-sku-card-with-image': showImage,
      'pisell-pro-cards-sku-card-no-image': !showImage,
      'pisell-pro-cards-sku-card-disabled': disabled
    }),
    onClick: function onClick() {
      if (disabled) return;
      _onClick === null || _onClick === void 0 || _onClick();
    },
    style: _defineProperty(_defineProperty({
      cursor: disabled ? 'not-allowed' : 'pointer'
    }, '--color-primary', colorPrimary), '--color-primary-bg', colorPrimaryBg)
  }, !!skuDisabled && !!showDisabledText && /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-disabled-mask"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-disabled-text",
    style: disabledTextStyle
  }, (skuCardConfig === null || skuCardConfig === void 0 || (_skuCardConfig$disabl2 = skuCardConfig.disabledText) === null || _skuCardConfig$disabl2 === void 0 ? void 0 : _skuCardConfig$disabl2.text) || locales.getText('pisell2.pro.cards.skuCard.disabledText'))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-left"
  }, showImage && /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-image-container",
    style: imageStyle
  }, !!cover ? /*#__PURE__*/React.createElement("img", {
    src: imageAli.ali(cover, 360),
    alt: title,
    className: "pisell-pro-cards-sku-card-image"
  }) : /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-image-default"
  }, titleText)), /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-content"
  }, showTitle && title && /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-title",
    style: titleStyle
  }, title), showSubTitle && subtitle && /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-subtitle",
    style: subTitleStyle
  }, subtitle), showPrice && price && /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-price",
    style: priceStyle
  }, price))), arrow || renderRight ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-pro-cards-sku-card-right",
    style: renderRight ? {} : {
      padding: '0 8px',
      alignItems: 'center'
    }
  }, renderRight ? typeof renderRight === 'function' ? renderRight() : renderRight : /*#__PURE__*/React.createElement(Iconfont, {
    type: "pisell2-chevron-right",
    style: {
      fontSize: '28px',
      color: disabled ? '#f2f2f2' : '#475467'
    }
  })) : null);
};
export default SKUCard;