import React, { useMemo } from 'react';
import { Avatar } from 'antd';
import PlusCircle from '@pisell/icon/es/PlusCircle';
import XCircle from '@pisell/icon/es/XCircle';
import { image, locales } from '@pisell/utils';
import "./index.less";
import classNames from 'classnames';
var CustomerCard = function CustomerCard(_ref) {
  var onClickItem = _ref.onClickItem,
    customer = _ref.customer,
    _ref$showIcon = _ref.showIcon,
    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
    customIcon = _ref.customIcon,
    onRemove = _ref.onRemove,
    className = _ref.className;
  var username = useMemo(function () {
    if (!customer) {
      return 'Walk-in';
    }
    var firstLastName = customer.first_name || customer.last_name ? "".concat(customer.first_name, " ").concat(customer.last_name) : '';
    return customer.name || (customer.display_name || '').trim() || (customer.nickname || '').trim() || firstLastName.trim() || '';
  }, [customer]);
  var getAvatarName = useMemo(function () {
    if (!username) return '';
    var parts = username.trim().split(/\s+/); // 按空格分割并去掉多余空格

    if (parts.length === 1) {
      return parts[0].charAt(0); // 如果只有一个部分，返回第一个字符
    }

    // 如果有多个部分，返回前两个部分的首字符
    return parts[0].charAt(0) + parts[1].charAt(0);
  }, [username]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-lowcode__customer_card', className),
    onClick: function onClick() {
      onClickItem(customer);
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    className: "pisell-lowcode__customer_card-avatar",
    src: customer !== null && customer !== void 0 && customer.cover ? image.ali(customer === null || customer === void 0 ? void 0 : customer.cover, 100) : undefined
    // icon={<User01 className="pisell-lowcode__customer_card-avatar-icon" />}
  }, getAvatarName), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-left"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-name"
  }, username), !customer ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-desc"
  }, locales.getText('pisell2.text.leave-empty-for-walk-in')) : /*#__PURE__*/React.createElement(React.Fragment, null, customer !== null && customer !== void 0 && customer.email ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-email"
  }, customer === null || customer === void 0 ? void 0 : customer.email) : null, customer !== null && customer !== void 0 && customer.phone ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-phone"
  }, customer === null || customer === void 0 ? void 0 : customer.phone) : null)), showIcon ? /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__customer_card-info-right",
    onClick: function onClick(e) {
      if (!customer) {
        return;
      }
      e.preventDefault();
      e.stopPropagation();
      onRemove === null || onRemove === void 0 || onRemove();
    }
  }, customIcon ? customIcon : customer ? /*#__PURE__*/React.createElement(XCircle, {
    className: "pisell-lowcode__customer_card-add-icon"
  }) : /*#__PURE__*/React.createElement(PlusCircle, {
    className: "pisell-lowcode__customer_card-add-icon"
  })) : null));
};
export default CustomerCard;