import React, { useMemo } from 'react';
import { PREFIX } from "../../status";
import { image as imageAli } from '@pisell/utils';
import Favorite from "../Favorite";
import "./index.less";
var Cover = function Cover(_ref) {
  var props = _ref.props;
  var dataSource = props.dataSource,
    skuImageConfig = props.skuImageConfig;
  var _ref2 = skuImageConfig || {},
    isCover = _ref2.isCover,
    width = _ref2.width,
    height = _ref2.height,
    radius = _ref2.radius,
    isTextFallback = _ref2.isTextFallback,
    background = _ref2.background;
  if (!isCover) return null;

  // 如果图片为空，且不展示文本，则不展示
  if (!(dataSource !== null && dataSource !== void 0 && dataSource.cover) && !isTextFallback) return null;
  var getTextCover = function getTextCover(title) {
    if (!(dataSource !== null && dataSource !== void 0 && dataSource.title)) return '';
    var cleanTitle = title.trim();
    if (cleanTitle.length === 0) return '';
    return cleanTitle.substring(0, 2).toUpperCase();
  };
  var finalStyle = useMemo(function () {
    return {
      borderRadius: radius,
      background: background
    };
  }, [radius, background]);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__card-cover")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__card-cover-image"),
    style: {
      width: "".concat(width) || 'auto',
      height: "".concat(height) || 'auto'
    }
  }, dataSource !== null && dataSource !== void 0 && dataSource.cover ? /*#__PURE__*/React.createElement("img", {
    loading: "lazy",
    src: imageAli.ali(dataSource === null || dataSource === void 0 ? void 0 : dataSource.cover, 360),
    alt: dataSource === null || dataSource === void 0 ? void 0 : dataSource.title,
    style: finalStyle
  }) : /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__card-cover-text"),
    style: finalStyle
  }, getTextCover((dataSource === null || dataSource === void 0 ? void 0 : dataSource.title) || '')), /*#__PURE__*/React.createElement(Favorite, {
    props: props
  })));
};
export default Cover;