import CustomerCard from "../../CustomerCard/index.js";
import React, { useMemo } from "react";
import { Button, Skeleton } from "antd";
import { locales } from "@pisell/utils";
import { PisellEmpty } from "@pisell/materials";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import classNames from "classnames";
import CheckCircle from "@pisell/icon/es/CheckCircle";
import "./index.less";
//#region src/components/pisellSelectCustomerModal/RightPanel/List/index.tsx
const CustomerList = (props) => {
	const { value, onChange, phone, customerOrigin, onLoadMore, loading, setPage } = props;
	const list = useMemo(() => {
		return (customerOrigin === null || customerOrigin === void 0 ? void 0 : customerOrigin.list) || [];
	}, [customerOrigin, phone]);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, list.length ? /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-list" }, list.map((item) => {
		const active = item.id === (value === null || value === void 0 ? void 0 : value.id);
		return /* @__PURE__ */ React.createElement(CustomerCard, {
			key: item.id,
			className: classNames("select-customer-right-panel-item", { "select-customer-right-panel-item-active": active }),
			customer: item,
			showIcon: active,
			customIcon: /* @__PURE__ */ React.createElement(CheckCircle, { style: {
				fontSize: 28,
				color: "#079455"
			} }),
			onClickItem: () => {
				onChange(item);
			}
		});
	}), customerOrigin.list.length < customerOrigin.count ? /* @__PURE__ */ React.createElement("div", { className: "select-customer-right-panel-load-more" }, /* @__PURE__ */ React.createElement(Button, {
		onClick: onLoadMore,
		loading
	}, locales.getText("pisell2.text.load-more"))) : null) : !loading ? /* @__PURE__ */ React.createElement(PisellEmpty, {
		description: locales.getText("pisell2.text.no-results-found"),
		imageStyle: { height: "auto" },
		extraDescription: /* @__PURE__ */ React.createElement("div", {
			className: "select-customer-right-panel-add",
			onClick: () => {
				setPage("create");
			}
		}, /* @__PURE__ */ React.createElement(PlusCircle, { className: "select-customer-right-panel-header-icon" }), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.create-new-client")))
	}) : /* @__PURE__ */ React.createElement(Skeleton, {
		round: true,
		active: true
	}));
};
//#endregion
export { CustomerList as default };
