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); }
import { Popover } from 'antd';
import React from 'react';
import styles from "./card.module.less";
import { BarChartOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import { AIMode, AIModeMeta, COLORS } from "../../constant";
import { FormattedMessage, useLocale } from 'dumi';
export var Card = function Card(_ref) {
  var _AIModeMeta$tag;
  var item = _ref.item,
    index = _ref.index,
    onClick = _ref.onClick;
  var _item$query = item.query,
    query = _item$query === void 0 ? {} : _item$query,
    _item$description = item.description,
    description = _item$description === void 0 ? {} : _item$description,
    _item$imageUrls = item.imageUrls,
    imageUrls = _item$imageUrls === void 0 ? [] : _item$imageUrls,
    tag = item.tag;
  var style = COLORS[index];
  var locale = useLocale();
  var lang = locale.id === 'zh' ? 'zh' : 'en';
  var handleClick = function handleClick(e) {
    e.stopPropagation();
    onClick === null || onClick === void 0 || onClick();
  };
  var popoverContent = /*#__PURE__*/React.createElement("div", {
    className: styles.popoverContent
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.popoverItem
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.popoverLabel
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "ai.recommend.card.caseName"
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.popoverValue
  }, _typeof(query) === 'object' ? query[lang] : query)), /*#__PURE__*/React.createElement("div", {
    className: styles.popoverItem
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.popoverLabel
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: "ai.recommend.card.description"
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.popoverValue
  }, _typeof(description) === 'object' ? description[lang] : description)));
  return /*#__PURE__*/React.createElement(Popover, {
    content: popoverContent,
    placement: "top",
    overlayClassName: styles.popoverOverlay
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.card,
    style: {
      background: style === null || style === void 0 ? void 0 : style.backgroundColor
    },
    onClick: handleClick
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.typeTag,
    style: style
  }, tag === AIMode.implement ? /*#__PURE__*/React.createElement(BarChartOutlined, {
    className: styles.typeIcon
  }) : /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
    className: styles.typeIcon
  }), /*#__PURE__*/React.createElement("span", {
    className: styles.typeText
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
    id: ((_AIModeMeta$tag = AIModeMeta[tag]) === null || _AIModeMeta$tag === void 0 ? void 0 : _AIModeMeta$tag.name) || tag
  }))), /*#__PURE__*/React.createElement("div", {
    className: styles.title
  }, _typeof(query) === 'object' ? query[lang] : query), /*#__PURE__*/React.createElement("div", {
    className: styles.imageContainer
  }, imageUrls.slice(0, 2).map(function (item, idx) {
    return /*#__PURE__*/React.createElement("img", {
      src: item,
      key: idx,
      className: styles["image".concat(idx)]
    });
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.hoverMask
  })));
};