import useEngineContext from "../../../../hooks/useEngineContext.js";
import { getFormData } from "../serve.js";
import React, { useEffect, useMemo, useState } from "react";
import { Tag, Tooltip } from "antd";
import { isArr, isUndefined, locales } from "@pisell/utils";
import { Iconfont } from "@pisell/materials";
import { useRequest } from "ahooks";
import "./index.less";
//#region src/components/booking/forms/single/RenderValueById.tsx
const RenderValueById = (props) => {
	var _field$setting, _ref, _ref$toString, _field$setting6;
	const { field, value: propsValue } = props;
	const { appHelper } = useEngineContext();
	const [displayCount, setDisplayCount] = useState(10);
	const _getFormData = useRequest(getFormData, {
		manual: true,
		cacheKey: `formOption-${(_field$setting = field.setting) === null || _field$setting === void 0 ? void 0 : _field$setting.linkedTable}-${(_ref = propsValue || []) === null || _ref === void 0 || (_ref$toString = _ref.toString) === null || _ref$toString === void 0 ? void 0 : _ref$toString.call(_ref)}`,
		staleTime: 500,
		cacheTime: 5e3
	});
	const value = useMemo(() => {
		let v = propsValue;
		if (field.filed_type === "form_to_form") if (isArr(propsValue)) v = propsValue;
		else if (propsValue === null || propsValue === void 0 ? void 0 : propsValue.form_ids) v = propsValue.form_ids;
		else v = propsValue;
		return v;
	}, [propsValue]);
	useEffect(() => {
		var _field$setting2;
		if (field.filed_type === "form_to_form" && ((_field$setting2 = field.setting) === null || _field$setting2 === void 0 ? void 0 : _field$setting2.linkedTable)) {
			var _field$setting3;
			_getFormData.run({
				form_record_ids: value,
				form_id: (_field$setting3 = field.setting) === null || _field$setting3 === void 0 ? void 0 : _field$setting3.linkedTable,
				skip: 1,
				num: 999
			});
		}
	}, [field.filed_type, value]);
	const options = useMemo(() => {
		var _field$setting4, _field$setting5;
		if (field.filed_type === "form_to_form" && (field === null || field === void 0 || (_field$setting4 = field.setting) === null || _field$setting4 === void 0 ? void 0 : _field$setting4.linkedTable)) {
			var _getFormData$data;
			return ((_getFormData$data = _getFormData.data) === null || _getFormData$data === void 0 || (_getFormData$data = _getFormData$data.data) === null || _getFormData$data === void 0 || (_getFormData$data = _getFormData$data.list) === null || _getFormData$data === void 0 ? void 0 : _getFormData$data.map((item) => ({
				title: item.main_field,
				id: item.form_record_id
			}))) || [];
		}
		return field === null || field === void 0 || (_field$setting5 = field.setting) === null || _field$setting5 === void 0 ? void 0 : _field$setting5.customTypeList;
	}, [
		field.filed_type,
		field === null || field === void 0 || (_field$setting6 = field.setting) === null || _field$setting6 === void 0 ? void 0 : _field$setting6.customTypeList,
		_getFormData.data
	]);
	if (isArr(value)) {
		var _field$setting7;
		const formListDisplay = (field === null || field === void 0 || (_field$setting7 = field.setting) === null || _field$setting7 === void 0 ? void 0 : _field$setting7.displayStyle) === "list" && (field === null || field === void 0 ? void 0 : field.filed_type) === "form_to_form";
		let _list = options === null || options === void 0 ? void 0 : options.filter((i) => {
			return value === null || value === void 0 ? void 0 : value.includes((i === null || i === void 0 ? void 0 : i.id) || i.value);
		});
		let _str = !formListDisplay && (_list === null || _list === void 0 ? void 0 : _list.map((i) => {
			var _appHelper$utils;
			const title = appHelper === null || appHelper === void 0 || (_appHelper$utils = appHelper.utils) === null || _appHelper$utils === void 0 ? void 0 : _appHelper$utils.translationShop((i === null || i === void 0 ? void 0 : i.title) || (i === null || i === void 0 ? void 0 : i.label));
			return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Tag, { className: "pisell-lowcode__booking-form-link-tag-title" }, title));
		})) || "-";
		if (formListDisplay) {
			const displayList = (_list === null || _list === void 0 ? void 0 : _list.slice(0, displayCount)) || [];
			_str = (displayList === null || displayList === void 0 ? void 0 : displayList.map((i, index) => {
				var _appHelper$utils2;
				const title = appHelper === null || appHelper === void 0 || (_appHelper$utils2 = appHelper.utils) === null || _appHelper$utils2 === void 0 ? void 0 : _appHelper$utils2.translationShop((i === null || i === void 0 ? void 0 : i.title) || (i === null || i === void 0 ? void 0 : i.label));
				return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-form-link-to-list-item" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-form-link-to-list-item-index" }, index + 1), /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-form-link-to-list-item-title" }, title)));
			})) || "-";
		}
		return /* @__PURE__ */ React.createElement("span", {
			style: {
				overflow: "hidden",
				display: "inline-block",
				width: "100%"
			},
			className: formListDisplay ? "pisell-lowcode__booking-form-link-to-list-wrap" : ""
		}, _str || "-", formListDisplay && (_list === null || _list === void 0 ? void 0 : _list.length) > displayCount && /* @__PURE__ */ React.createElement("div", {
			className: "pisell-lowcode__booking-form-link-to-list-item-more",
			onClick: () => setDisplayCount((prev) => Math.min(prev + 10, (_list === null || _list === void 0 ? void 0 : _list.length) || 0))
		}, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.form.link.to.another.record.more")), /* @__PURE__ */ React.createElement(Iconfont, { type: "icona-IconStroke" })));
	}
	if (!isUndefined(value)) {
		var _field$setting8, _appHelper$utils3, _item$, _item$2;
		if ((field === null || field === void 0 ? void 0 : field.filed_type) === "select" && !(field === null || field === void 0 || (_field$setting8 = field.setting) === null || _field$setting8 === void 0 ? void 0 : _field$setting8.version)) return /* @__PURE__ */ React.createElement("span", null, value || "-");
		let _item = options === null || options === void 0 ? void 0 : options.filter((i) => (i === null || i === void 0 ? void 0 : i.id) == value);
		return (appHelper === null || appHelper === void 0 || (_appHelper$utils3 = appHelper.utils) === null || _appHelper$utils3 === void 0 ? void 0 : _appHelper$utils3.translationShop((_item === null || _item === void 0 || (_item$ = _item[0]) === null || _item$ === void 0 ? void 0 : _item$.title) || (_item === null || _item === void 0 || (_item$2 = _item[0]) === null || _item$2 === void 0 ? void 0 : _item$2.label))) || "-";
	}
	return null;
};
//#endregion
export { RenderValueById as default };
