import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import Avatar from "./components/Avatar/index.js";
import { SwipeAction } from "./components/SwipeAction/index.js";
import ContactInfoModal from "../contactInfoModal/index.js";
import locales_default from "./locales.js";
import React, { useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Iconfont } from "@pisell/materials";
import "./index.less";
//#region src/plus/contactInfo/index.tsx
const PREFIX = "pisell-plus-contact-info";
const ContactInfo = (props) => {
	var _context$appHelper$ut, _props$style2;
	console.log("props>>>>>>>>>", props);
	const { dataSource, defaultName, placeholder, direction = "horizontal", isShowDelete, isShowAvatar, isShowPhone, isShowEmail, horizontalGap, verticalGap, onSave, onDelete, onCancel } = props;
	const context = useEngineContext();
	locales.init(locales_default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
	const [modalVisible, setModalVisible] = useState(false);
	const isHorizontal = useMemo(() => {
		return direction === "horizontal";
	}, [direction]);
	const displayName = useMemo(() => {
		const { first_name, last_name } = dataSource || {};
		if (!first_name && !last_name) return defaultName || "";
		return `${first_name || ""} ${last_name || ""}`;
	}, [dataSource, defaultName]);
	const displayPhone = useMemo(() => {
		const { country_calling_code, phone } = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.phone) || {};
		if (!country_calling_code || !phone) return "";
		return `${((country_calling_code === null || country_calling_code === void 0 ? void 0 : country_calling_code.startsWith("+")) ? country_calling_code : `+${country_calling_code}`) || ""} ${phone || ""}`;
	}, [dataSource === null || dataSource === void 0 ? void 0 : dataSource.phone]);
	const isEmpty = useMemo(() => {
		var _dataSource$phone;
		return !(dataSource === null || dataSource === void 0 ? void 0 : dataSource.first_name) && !(dataSource === null || dataSource === void 0 ? void 0 : dataSource.last_name) && !(dataSource === null || dataSource === void 0 || (_dataSource$phone = dataSource.phone) === null || _dataSource$phone === void 0 ? void 0 : _dataSource$phone.phone) && !(dataSource === null || dataSource === void 0 ? void 0 : dataSource.email);
	}, [dataSource]);
	const handleClick = () => {
		console.log("handleClick");
		setModalVisible(true);
	};
	const _rightActions = useMemo(() => {
		return [{
			key: "delete",
			text: /* @__PURE__ */ React.createElement("div", { style: {
				display: "flex",
				justifyContent: "center",
				alignItems: "center",
				color: "white",
				cursor: "pointer",
				padding: "10px 0px",
				borderRadius: "8px"
			} }, /* @__PURE__ */ React.createElement(Iconfont, {
				type: "pisell2-trash-01",
				style: {
					fontSize: 20,
					marginRight: 4
				}
			}), /* @__PURE__ */ React.createElement("span", { style: {
				fontSize: 12,
				fontWeight: 500
			} }, locales.getText("pisell2.text.contact-info.actions.delete"))),
			color: "danger",
			onClick: (e) => {
				e.preventDefault();
				e.stopPropagation();
				onDelete === null || onDelete === void 0 || onDelete();
			}
		}];
	}, [dataSource, onDelete]);
	const renderContent = () => {
		var _props$style;
		return /* @__PURE__ */ React.createElement("div", {
			className: `${PREFIX}__${direction}`,
			style: {
				gap: verticalGap,
				padding: (props === null || props === void 0 || (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.padding) || "8px"
			}
		}, isHorizontal ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
			className: `${PREFIX}__horizontal-left`,
			style: { gap: horizontalGap }
		}, isShowAvatar && /* @__PURE__ */ React.createElement(Avatar, {
			config: props.avatar,
			name: displayName,
			cover: ""
		}), /* @__PURE__ */ React.createElement("div", {
			className: `${PREFIX}__horizontal-left-content`,
			style: { gap: verticalGap }
		}, isEmpty ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__empty-description` }, placeholder || locales.getText("pisell2.text.contact-info.placeholder")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__name-horizontal-container` }, /* @__PURE__ */ React.createElement("span", {
			className: `${PREFIX}__name-horizontal`,
			style: props.nameStyle
		}, displayName), isShowPhone && displayPhone && /* @__PURE__ */ React.createElement("span", {
			className: `pisell-plus-contact-info__phone-horizontal`,
			style: props.textStyle
		}, "(", displayPhone, ")")), isShowEmail && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.email) && /* @__PURE__ */ React.createElement("div", {
			className: `pisell-plus-contact-info__text`,
			style: props.textStyle
		}, dataSource === null || dataSource === void 0 ? void 0 : dataSource.email)))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__horizontal-right` }, /* @__PURE__ */ React.createElement(Iconfont, {
			type: isEmpty ? "pisell2-plus-circle" : "pisell2-edit-05",
			className: `${PREFIX}__horizontal-right-icon`
		}))) : /* @__PURE__ */ React.createElement(React.Fragment, null, isShowAvatar && /* @__PURE__ */ React.createElement(Avatar, {
			config: props.avatar,
			name: "hhhhh",
			cover: ""
		}), isEmpty ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__empty-description` }, placeholder || locales.getText("pisell2.text.contact-info.placeholder")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
			className: `${PREFIX}__name`,
			style: props.nameStyle
		}, displayName), isShowPhone && displayPhone && /* @__PURE__ */ React.createElement("div", {
			className: `pisell-plus-contact-info__text`,
			style: props.textStyle
		}, displayPhone), isShowEmail && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.email) && /* @__PURE__ */ React.createElement("div", {
			className: `pisell-plus-contact-info__text`,
			style: props.textStyle
		}, dataSource === null || dataSource === void 0 ? void 0 : dataSource.email))));
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
		className: `${PREFIX}`,
		style: _objectSpread2(_objectSpread2({}, props.style || {}), {}, { padding: 0 }),
		onClick: handleClick
	}, isShowDelete && !isEmpty ? /* @__PURE__ */ React.createElement(SwipeAction, {
		closeOnAction: false,
		rightActions: _rightActions,
		style: { borderRadius: (props === null || props === void 0 || (_props$style2 = props.style) === null || _props$style2 === void 0 ? void 0 : _props$style2.borderRadius) || 0 }
	}, renderContent()) : renderContent()), /* @__PURE__ */ React.createElement(ContactInfoModal, {
		open: modalVisible,
		dataSource,
		isShowDelete,
		onCancel: () => {
			setModalVisible(false);
			onCancel === null || onCancel === void 0 || onCancel();
		},
		onSave: (value) => {
			setModalVisible(false);
			onSave === null || onSave === void 0 || onSave(value);
		},
		onDelete: () => {
			setModalVisible(false);
			onDelete === null || onDelete === void 0 || onDelete();
		}
	}));
};
//#endregion
export { PREFIX, ContactInfo as default };
