import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import customSelect_default from "../../components/customSelect/index.js";
import CollapsibleList from "../../components/collapsibleList/index.js";
import useComponents from "../../../../hooks/useComponents.js";
import RenderValueById from "./RenderValueById.js";
import { formatDate as formatDate$1 } from "../../../../utils/date.js";
import dayjs from "dayjs";
import React, { useCallback, useMemo } from "react";
import { Avatar, Tag } from "antd";
import { image, locales } from "@pisell/utils";
import FileDownload02 from "@pisell/icon/es/FileDownload02";
import "./index.less";
//#region src/components/booking/forms/single/index.tsx
const queryValueById = [
	"checkbox",
	"radioButton",
	"select",
	"form_to_form"
];
/**
* @title: 表单选择器
* @description:
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-01-30 17:06
*/
const Single = ({ value, onChange, form, mode, optionRender, loading, customSelectProps, onAdd, addButtonProps, modalOpen, watch, drawerProps }) => {
	var _form$form4, _form$form5;
	const [HumanBodySelector] = useComponents({ components: ["HumanBodySelector"] });
	/**
	* @title: 渲染表单内容
	* @description:
	* @param {any} fieldData
	* @param {any} field
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 17:06
	*/
	const renderFieldValue = (fieldData, field) => {
		const val = fieldData[field.key];
		if (field.filed_type === "attachment") {
			if (Array.isArray(val)) return val.map((item) => {
				if (item.type.indexOf("image") !== -1) return /* @__PURE__ */ React.createElement("img", {
					className: "attachment-item",
					src: image.ali(item.url, 200),
					key: image.ali(item.url, 200)
				});
				return /* @__PURE__ */ React.createElement("a", {
					href: item.url,
					key: item.url,
					style: {
						display: "block",
						marginTop: 8
					},
					onClick: (e) => {
						e.stopPropagation();
					}
				}, /* @__PURE__ */ React.createElement(FileDownload02, { style: { fontSize: 40 } }));
			});
		}
		if (field.filed_type === "customer_cover") return /* @__PURE__ */ React.createElement(Avatar, { src: val });
		if (field.filed_type === "signature") return /* @__PURE__ */ React.createElement("img", {
			className: "attachment-item",
			src: image.ali(val, 200),
			key: image.ali(val, 200)
		});
		if (field.filed_type === "customer_phone") {
			if (val) return `${val.country_calling_code && `(+${val.country_calling_code})`} ${val.phone || ""}`;
		}
		if (field.filed_type === "body_hotspot_image") return HumanBodySelector ? /* @__PURE__ */ React.createElement(HumanBodySelector, {
			value: val,
			disable: true
		}) : val;
		if (field.filed_type === "agreement") return val === 1 ? locales.getText("pisell2.booking.info.text.form-agreement-yes") : locales.getText("pisell2.booking.info.text.form-agreement-no");
		if (queryValueById.includes(field === null || field === void 0 ? void 0 : field.filed_type)) return /* @__PURE__ */ React.createElement(RenderValueById, {
			field,
			value: val
		});
		if ((field === null || field === void 0 ? void 0 : field.filed_type) === "media") return null;
		return val || "-";
	};
	/**
	* @title:渲染表单数据
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 17:07
	*/
	const renderItem = useCallback((fieldData) => {
		let _fields = form.field || [];
		_fields = _fields.filter((item) => item.status !== "hide");
		return /* @__PURE__ */ React.createElement(CollapsibleList, {
			list: _fields,
			renderItem: (field) => {
				return /* @__PURE__ */ React.createElement("div", {
					className: "pet-form-item",
					key: field.key
				}, /* @__PURE__ */ React.createElement("div", { className: "pet-form-item-label" }, field.field_column.title), /* @__PURE__ */ React.createElement("div", { className: "pet-form-item-value" }, renderFieldValue(fieldData, field)));
			}
		});
	}, [form]);
	console.log("fff", form);
	const ignoreValidity = useMemo(() => {
		var _form$form;
		return !(form === null || form === void 0 || (_form$form = form.form) === null || _form$form === void 0 || (_form$form = _form$form.setting) === null || _form$form === void 0 ? void 0 : _form$form.validity) || form.form.setting.validity.type === "no_expiry";
	}, [form === null || form === void 0 ? void 0 : form.form]);
	const getExpireStatus = (expiredAt) => {
		if (ignoreValidity || !expiredAt) return null;
		const now = dayjs();
		const expireDate = dayjs(expiredAt).endOf("day");
		const diffDays = expireDate.diff(now, "day");
		const formattedDate = formatDate$1(expireDate, "YYYY-MM-DD", "DD/MM/YYYY");
		if (now.isAfter(expireDate)) return /* @__PURE__ */ React.createElement("div", { style: {
			color: "#999999",
			fontSize: "14px",
			lineHeight: "20px"
		} }, /* @__PURE__ */ React.createElement(Tag, {
			color: "red",
			style: {
				borderRadius: 16,
				marginRight: 8
			}
		}, locales.getText("pisell2.text.status.expired")), locales.getText("pisell2.text.validity.expired")(formattedDate));
		if (diffDays < 7) return /* @__PURE__ */ React.createElement("div", { style: {
			color: "#FFA940",
			fontSize: "14px",
			lineHeight: "20px"
		} }, locales.getText("pisell2.text.validity.expiring_soon")(formattedDate));
		return /* @__PURE__ */ React.createElement("div", { style: {
			color: "#999999",
			fontSize: "14px",
			lineHeight: "20px"
		} }, locales.getText("pisell2.text.validity.valid_through")(formattedDate));
	};
	/**
	* @title: 渲染字段
	* @description:
	* @param {any} item
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 17:08
	*/
	const _optionRender = (item) => {
		if (optionRender) return optionRender(item);
		return /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement("div", { style: {
			color: "#1B1B1B",
			fontSize: 16,
			fontWeight: 600,
			lineHeight: "22px"
		} }, item["main_field"] || item[form.option_key] || "-"), /* @__PURE__ */ React.createElement("div", null, getExpireStatus(item.expired_at)));
	};
	/**
	* @title: 添加按钮
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 17:09
	*/
	const _addButtonProps = useMemo(() => {
		var _form$form2, _form$form3;
		let obj = _objectSpread2({
			title: `${locales.getText("pisell2.text.add-a")} ${((_form$form2 = form.form) === null || _form$form2 === void 0 ? void 0 : _form$form2.title) || "-"}`,
			subTitle: `${locales.getText("pisell2.text.add-another")} ${((_form$form3 = form.form) === null || _form$form3 === void 0 ? void 0 : _form$form3.title) || "-"}`
		}, addButtonProps);
		if (["form", "table"].includes(form.type)) obj.onClick = onAdd;
		return obj;
	}, [
		form,
		addButtonProps,
		value,
		watch
	]);
	/**
	* @title: 统一 form 为单选  table为多选
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 17:09
	*/
	const _mode = useMemo(() => {
		if (["form"].includes(mode)) return "single";
		if (["table"].includes(mode)) return "multiple";
		return mode;
	}, [mode, form]);
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-pet-cards" }, /* @__PURE__ */ React.createElement(customSelect_default, _objectSpread2({
		loading,
		value,
		options: form.options || [],
		onValueChange: (e) => {
			onChange(e);
		},
		modalOpen,
		mode: _mode,
		previewItemClassName: "pisell-lowcode__booking-pet-card",
		previewItemRender: (d) => {
			return renderItem(d);
		},
		name: ((_form$form4 = form.form) === null || _form$form4 === void 0 ? void 0 : _form$form4.title) || "-",
		addButtonProps: _addButtonProps,
		drawerProps: _objectSpread2({
			title: `${locales.getText("pisell2.text.select")} ${((_form$form5 = form.form) === null || _form$form5 === void 0 ? void 0 : _form$form5.title) || "-"}`,
			destroyOnClose: true
		}, drawerProps || {}),
		optionRender: _optionRender,
		rowKey: "form_record_id"
	}, customSelectProps || {})));
};
//#endregion
export { Single as default };
