import React, { useMemo } from "react";
import { Avatar } from "antd";
import { image, locales } from "@pisell/utils";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import classNames from "classnames";
import XCircle from "@pisell/icon/es/XCircle";
import "./index.less";
//#region src/components/pisellSelectCustomerModal/CustomerCard/index.tsx
const CustomerCard = ({ onClickItem, customer, showIcon = true, customIcon, onRemove, className }) => {
	const username = useMemo(() => {
		if (!customer) return "Walk-in";
		const firstLastName = customer.first_name || customer.last_name ? `${customer.first_name} ${customer.last_name}` : "";
		return customer.name || (customer.display_name || "").trim() || (customer.nickname || "").trim() || firstLastName.trim() || "";
	}, [customer]);
	const getAvatarName = useMemo(() => {
		if (!username) return "";
		const 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: () => {
			onClickItem(customer);
		}
	}, /* @__PURE__ */ React.createElement(Avatar, {
		className: "pisell-lowcode__customer_card-avatar",
		src: (customer === null || customer === void 0 ? void 0 : customer.cover) ? image.ali(customer === null || customer === void 0 ? void 0 : customer.cover, 100) : void 0
	}, 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 ? 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 ? 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: (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));
};
//#endregion
export { CustomerCard as default };
