import { getLocale } from "../../../../utils/locales.js";
import locales_default from "../../locales.js";
import useComponents from "../../../../hooks/useComponents.js";
import React, { useMemo, useRef } from "react";
import { Divider, Dropdown } from "antd";
import { locales } from "@pisell/utils";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import DotsVertical from "@pisell/icon/es/DotsVertical";
import { useControllableValue } from "ahooks";
import "./index.less";
//#region src/components/booking/materiels/contacts/index.tsx
locales.init(locales_default, getLocale());
const _name = (item) => {
	if (item === null || item === void 0 ? void 0 : item.display_name) {
		var _item$display_name;
		return item === null || item === void 0 || (_item$display_name = item.display_name) === null || _item$display_name === void 0 ? void 0 : _item$display_name.trim();
	}
	if (item === null || item === void 0 ? void 0 : item.nickname) {
		var _item$nickname;
		return item === null || item === void 0 || (_item$nickname = item.nickname) === null || _item$nickname === void 0 ? void 0 : _item$nickname.trim();
	}
	if ((item === null || item === void 0 ? void 0 : item.first_name) || (item === null || item === void 0 ? void 0 : item.last_name)) return (item === null || item === void 0 ? void 0 : item.first_name) + " " + (item === null || item === void 0 ? void 0 : item.last_name);
	return "-";
};
const Contacts = (props) => {
	const [state, setState] = useControllableValue(props, { defaultValue: [] });
	const operationType = useRef(null);
	const currentRef = useRef(null);
	const contactRef = useRef(null);
	const [ContactModal] = useComponents({ components: ["ContactModal"] });
	const menus = useMemo(() => {
		return [{
			key: "edit",
			label: locales.getText("pisell2.text.edit-profile")
		}, {
			key: "remove",
			label: locales.getText("pisell2.text.remove-contact")
		}];
	}, []);
	const handleEditContact = (item, index) => {
		var _contactRef$current;
		operationType.current = "edit";
		currentRef.current = index;
		contactRef === null || contactRef === void 0 || (_contactRef$current = contactRef.current) === null || _contactRef$current === void 0 || _contactRef$current.open({ detail: item });
	};
	const handleRemoveContact = (item, index) => {
		setState((v) => (v || []).filter((_, i) => i !== index));
	};
	const menuChange = (key, item, index) => {
		({
			edit: handleEditContact,
			remove: handleRemoveContact
		})[key](item, index);
	};
	const handleAddClick = () => {
		var _contactRef$current2;
		operationType.current = "add";
		contactRef === null || contactRef === void 0 || (_contactRef$current2 = contactRef.current) === null || _contactRef$current2 === void 0 || _contactRef$current2.open({
			detail: null,
			event_id: 0
		});
	};
	const handleChange = (value) => {
		if (operationType.current === "add") setState((v) => [...v || [], value]);
		else if (operationType.current === "edit") setState((v) => (v || []).map((item, index) => {
			if (index === currentRef.current) return value;
			return item;
		}));
	};
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts-title" }, locales.getText("pisell2.text.contacts")), !!(state === null || state === void 0 ? void 0 : state.length) && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts-value-wrap" }, (state || []).map((item, index) => {
		var _item$country_calling;
		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
			className: "pisell-lowcode__contacts-item",
			key: item.id
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts-item-left" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts-name" }, _name(item)), item.email && /* @__PURE__ */ React.createElement("div", null, item.email), (item === null || item === void 0 ? void 0 : item.phone) ? /* @__PURE__ */ React.createElement("div", null, (item === null || item === void 0 ? void 0 : item.country_calling_code) ? `(${(item === null || item === void 0 || (_item$country_calling = item.country_calling_code) === null || _item$country_calling === void 0 ? void 0 : _item$country_calling.includes("+")) ? "" : "+"}${item === null || item === void 0 ? void 0 : item.country_calling_code})` : "", " ", item === null || item === void 0 ? void 0 : item.phone) : null), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__contacts-item-menu" }, /* @__PURE__ */ React.createElement(Dropdown, {
			menu: {
				items: menus,
				onClick: (e) => menuChange(e.key, item, index)
			},
			placement: "bottomRight"
		}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(DotsVertical, { style: {
			fontSize: 24,
			color: "#475467"
		} }))))), index !== (state === null || state === void 0 ? void 0 : state.length) - 1 && /* @__PURE__ */ React.createElement(Divider, null));
	})), /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__contacts-add",
		onClick: handleAddClick
	}, /* @__PURE__ */ React.createElement(PlusCircle, { style: { fontSize: 24 } }), /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__contacts-add-text" }, locales.getText("pisell2.text.add-contacts"))), ContactModal && /* @__PURE__ */ React.createElement(ContactModal, {
		ref: contactRef,
		type: "order",
		showRemoveBtn: false,
		onChange: handleChange
	}));
};
//#endregion
export { Contacts as default };
