import { _asyncToGenerator } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import HolderItem from "../../../../../../plus/selectHolder/components/HolderItem/index.js";
import HolderList from "../../../../../../plus/selectHolder/components/HolderList/index.js";
import { SelectHolderModal, selectHolderModal } from "../../../../utils/selectHolderModal.js";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Button, Col, Row } from "antd";
import { locales } from "@pisell/utils";
import { Iconfont } from "@pisell/materials";
import "./index.less";
//#region src/components/booking/info2/service/editService/Holder/index.tsx
const LinkButton = Button;
const normalizeValue = (val) => {
	if (Array.isArray(val)) return val.filter((item) => item !== void 0 && item !== null);
	if (val === void 0 || val === null || val === "") return [];
	return [val];
};
const Holder = ({ state, cacheItem, value, onChange, dispatch }) => {
	var _state$bookingConfig, _holderConfig$form, _state$bookingConfig2, _cacheItem$_extend, _state$pet4, _state$pet5, _state$bookingConfig4;
	const holderConfig = (state === null || state === void 0 || (_state$bookingConfig = state.bookingConfig) === null || _state$bookingConfig === void 0 ? void 0 : _state$bookingConfig.holder) || {};
	const title = (holderConfig === null || holderConfig === void 0 || (_holderConfig$form = holderConfig.form) === null || _holderConfig$form === void 0 ? void 0 : _holderConfig$form.title) || (holderConfig === null || holderConfig === void 0 ? void 0 : holderConfig.title) || locales.getText("pisell2.text.holder");
	const isRequired = (state === null || state === void 0 || (_state$bookingConfig2 = state.bookingConfig) === null || _state$bookingConfig2 === void 0 || (_state$bookingConfig2 = _state$bookingConfig2.config) === null || _state$bookingConfig2 === void 0 || (_state$bookingConfig2 = _state$bookingConfig2.basic) === null || _state$bookingConfig2 === void 0 ? void 0 : _state$bookingConfig2.subject_require) === "require";
	const maxSelectedCount = (cacheItem === null || cacheItem === void 0 || (_cacheItem$_extend = cacheItem._extend) === null || _cacheItem$_extend === void 0 ? void 0 : _cacheItem$_extend.quantity) || 1;
	const selectType = maxSelectedCount > 1 ? "multiple" : "single";
	const [selectedValues, setSelectedValues] = useState(() => normalizeValue(value));
	useEffect(() => {
		setSelectedValues(normalizeValue(value));
	}, [value]);
	const holderOptions = useMemo(() => {
		var _state$pet, _state$bookingConfig3, _state$pet2, _state$pet3;
		const holdersFromState = Array.isArray(state === null || state === void 0 || (_state$pet = state.pet) === null || _state$pet === void 0 ? void 0 : _state$pet.holders) ? state.pet.holders : [];
		const formId = (state === null || state === void 0 || (_state$bookingConfig3 = state.bookingConfig) === null || _state$bookingConfig3 === void 0 || (_state$bookingConfig3 = _state$bookingConfig3.config) === null || _state$bookingConfig3 === void 0 || (_state$bookingConfig3 = _state$bookingConfig3.basic) === null || _state$bookingConfig3 === void 0 || (_state$bookingConfig3 = _state$bookingConfig3.appointment_subject) === null || _state$bookingConfig3 === void 0 ? void 0 : _state$bookingConfig3.form_id) || 0;
		const holdersFromValue = Array.isArray(state === null || state === void 0 || (_state$pet2 = state.pet) === null || _state$pet2 === void 0 || (_state$pet2 = _state$pet2.value) === null || _state$pet2 === void 0 ? void 0 : _state$pet2[formId]) ? state === null || state === void 0 || (_state$pet3 = state.pet) === null || _state$pet3 === void 0 || (_state$pet3 = _state$pet3.value) === null || _state$pet3 === void 0 ? void 0 : _state$pet3[formId] : [];
		return (holdersFromState.length > 0 ? holdersFromState : holdersFromValue).map((item) => {
			const id = (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.form_record_id) || (item === null || item === void 0 ? void 0 : item.value);
			if (id === void 0 || id === null) return null;
			return {
				label: (item === null || item === void 0 ? void 0 : item.main_field) || (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name) || locales.getText("pisell-select-holder-please-select"),
				value: id,
				avatar: item === null || item === void 0 ? void 0 : item.avatar,
				subtitle: (item === null || item === void 0 ? void 0 : item.subtitle) || (item === null || item === void 0 ? void 0 : item.second_field) || (item === null || item === void 0 ? void 0 : item.sub_field)
			};
		}).filter(Boolean);
	}, [
		state === null || state === void 0 || (_state$pet4 = state.pet) === null || _state$pet4 === void 0 ? void 0 : _state$pet4.holders,
		state === null || state === void 0 || (_state$pet5 = state.pet) === null || _state$pet5 === void 0 ? void 0 : _state$pet5.value,
		state === null || state === void 0 || (_state$bookingConfig4 = state.bookingConfig) === null || _state$bookingConfig4 === void 0 ? void 0 : _state$bookingConfig4.config
	]);
	const displayConfig = useMemo(() => ({
		direction: "vertical",
		selectType,
		showAvatar: true,
		showTitle: true,
		showSubtitle: Boolean(holderOptions.some((option) => option.subtitle))
	}), [holderOptions, selectType]);
	const selectedSummary = useMemo(() => {
		if (!maxSelectedCount) return "";
		const label = locales.getText("pisell-select-holder-selected").replace(/[:：]\s*$/, "");
		return `${selectedValues.length}/${maxSelectedCount} ${label}`;
	}, [selectedValues.length, maxSelectedCount]);
	const handleApply = useCallback((nextValues) => {
		onChange === null || onChange === void 0 || onChange(nextValues);
	}, [onChange, selectType]);
	const handleEdit = useCallback(function() {
		var _ref = _asyncToGenerator(function* (event) {
			var _state$bookingConfig5, _cacheItem$_extend2;
			event === null || event === void 0 || event.preventDefault();
			const holderConfig = (state === null || state === void 0 || (_state$bookingConfig5 = state.bookingConfig) === null || _state$bookingConfig5 === void 0 ? void 0 : _state$bookingConfig5.holder) || {};
			const currentMaxSelectedCount = (holderConfig === null || holderConfig === void 0 ? void 0 : holderConfig.maxSelectedCount) || (cacheItem === null || cacheItem === void 0 || (_cacheItem$_extend2 = cacheItem._extend) === null || _cacheItem$_extend2 === void 0 ? void 0 : _cacheItem$_extend2.quantity) || 1;
			const result = yield selectHolderModal({
				state,
				dispatch,
				initialValue: selectedValues.length > 0 ? selectedValues : void 0,
				maxSelectedCount: currentMaxSelectedCount
			});
			if (result && result.length > 0) {
				setSelectedValues(result);
				handleApply(result);
			}
		});
		return function(_x) {
			return _ref.apply(this, arguments);
		};
	}(), [
		selectedValues,
		state,
		dispatch,
		handleApply
	]);
	const handleClear = useCallback((event) => {
		event === null || event === void 0 || event.preventDefault();
		setSelectedValues([]);
		handleApply([]);
	}, [handleApply]);
	const clearDisabled = useMemo(() => {
		return (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) === 0;
	}, [selectedValues]);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Col, { span: 24 }, /* @__PURE__ */ React.createElement("div", { className: "booking-holder-field" }, /* @__PURE__ */ React.createElement("div", { className: "booking-holder-field__header" }, /* @__PURE__ */ React.createElement("div", { className: "booking-holder-field__title" }, isRequired && /* @__PURE__ */ React.createElement("span", { className: "booking-holder-field__required" }, "*"), /* @__PURE__ */ React.createElement("span", null, title), maxSelectedCount ? /* @__PURE__ */ React.createElement("span", { className: "booking-holder-field__count" }, selectedSummary) : null), /* @__PURE__ */ React.createElement("div", { className: "booking-holder-field__actions" }, /* @__PURE__ */ React.createElement(LinkButton, {
		type: "link",
		size: "small",
		className: "booking-holder-field__action-button",
		onClick: handleEdit
	}, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-edit-05" }), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.text.edit"))), /* @__PURE__ */ React.createElement(LinkButton, {
		type: "link",
		size: "small",
		disabled: clearDisabled,
		className: "booking-holder-field__action-button",
		onClick: handleClear
	}, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-delete_wght300_24px" }), /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell2.booking.info.text.clear"))))), selectedValues.length === 0 ? /* @__PURE__ */ React.createElement(Row, null, /* @__PURE__ */ React.createElement(Col, {
		span: 8,
		xs: 24,
		sm: 12,
		md: 8,
		lg: 8,
		onClick: handleEdit
	}, /* @__PURE__ */ React.createElement(HolderItem, {
		item: {
			label: locales.getText("pisell2.booking.info.text.add-holder"),
			value: null
		},
		isAddItem: true
	}))) : /* @__PURE__ */ React.createElement(HolderList, {
		dataSource: selectedValues.map((item) => {
			const option = holderOptions.find((opt) => opt.value === item);
			return {
				label: (option === null || option === void 0 ? void 0 : option.label) || "",
				value: item
			};
		}),
		selectedValues,
		displayConfig,
		allowAdd: false,
		onClick: () => handleEdit()
	}))), /* @__PURE__ */ React.createElement(SelectHolderModal, null));
};
//#endregion
export { Holder as default };
