import React, { useMemo } from 'react';
import { PisellCard, PisellAvatar, Icon } from '@pisell/materials';
import { getAvatarText } from "../../utils";
import "./index.less";

// 类名前缀
export var PREFIX = 'pisell-lowcode-holder-item';
var HolderItem = function HolderItem(_ref) {
  var item = _ref.item,
    displayConfig = _ref.displayConfig,
    value = _ref.value,
    isAddItem = _ref.isAddItem;
  var _ref2 = displayConfig || {},
    _ref2$showAvatar = _ref2.showAvatar,
    showAvatar = _ref2$showAvatar === void 0 ? true : _ref2$showAvatar,
    _ref2$showTitle = _ref2.showTitle,
    showTitle = _ref2$showTitle === void 0 ? true : _ref2$showTitle,
    _ref2$showSubtitle = _ref2.showSubtitle,
    showSubtitle = _ref2$showSubtitle === void 0 ? false : _ref2$showSubtitle,
    _ref2$selectType = _ref2.selectType,
    selectType = _ref2$selectType === void 0 ? 'single' : _ref2$selectType,
    _ref2$direction = _ref2.direction,
    direction = _ref2$direction === void 0 ? 'vertical' : _ref2$direction,
    _ref2$showExtraFields = _ref2.showExtraFields,
    showExtraFields = _ref2$showExtraFields === void 0 ? false : _ref2$showExtraFields,
    _ref2$extraFields = _ref2.extraFields,
    extraFields = _ref2$extraFields === void 0 ? [] : _ref2$extraFields;
  var isSelected = useMemo(function () {
    if (!(value !== null && value !== void 0 && value.length) || !(item !== null && item !== void 0 && item.value)) return false;
    return value.includes(item.value);
  }, [value, item === null || item === void 0 ? void 0 : item.value]);

  /**
   * @title: 渲染额外字段
   * @description:
   * @param {*} useMemo
   * @return {*}
   * @Author: WangHan
   * @Date: 2025-10-11 14:24
   */
  var extraFieldsCom = useMemo(function () {
    if (!showExtraFields || !(extraFields !== null && extraFields !== void 0 && extraFields.length)) return null;
    return extraFields.map(function (field) {
      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(PREFIX, "-extra-field")
      }, (field === null || field === void 0 ? void 0 : field.isShowLabel) && /*#__PURE__*/React.createElement("span", {
        className: "".concat(PREFIX, "-extra-field-label")
      }, field.label, ":"), (field === null || field === void 0 ? void 0 : field.isShowValue) && (field === null || field === void 0 ? void 0 : field.value) && /*#__PURE__*/React.createElement("span", {
        className: "".concat(PREFIX, "-extra-field-value")
      }, item === null || item === void 0 ? void 0 : item[field.value]));
    });
  }, [showExtraFields, extraFields, item]);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-wrap ").concat(isSelected ? "".concat(PREFIX, "-wrap-selected") : '')
  }, /*#__PURE__*/React.createElement(PisellCard, {
    padding: 20,
    selected: isSelected
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-card ").concat(direction === 'horizontal' ? "".concat(PREFIX, "-card-horizontal") : '')
  }, showAvatar ? /*#__PURE__*/React.createElement(PisellAvatar, {
    src: item === null || item === void 0 ? void 0 : item.avatar,
    useTextAvatar: !(item !== null && item !== void 0 && item.avatar) && !isAddItem,
    className: "".concat(isAddItem ? "".concat(PREFIX, "-add-avatar") : ''),
    size: 'xxl'
  }, getAvatarText(item.label)) : null, (showTitle || showSubtitle) && /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-info")
  }, showTitle && /*#__PURE__*/React.createElement("span", {
    className: "".concat(PREFIX, "-name")
  }, item.label), showSubtitle && item.subtitle && /*#__PURE__*/React.createElement("span", {
    className: "".concat(PREFIX, "-subtitle")
  }, item.subtitle), extraFieldsCom), selectType === 'multiple' && /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "-check-icon ").concat(isSelected ? "".concat(PREFIX, "-check-icon-selected") : '')
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "CheckCircleFilled"
  })))));
};
export default HolderItem;