import { _objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _asyncToGenerator } from "../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { getAppointmentService, getPets, isDayBooking, isEventBooking, isOpenDeletePet, updateServicePrice } from "../../service2/utils.js";
import { request } from "../../../utils.js";
import { moveItemToFront } from "../../utils.js";
import { walkInData } from "../../model.js";
import { getWaiverTitle, setClientVariantClose } from "../utils.js";
import useGetHolderList from "../../hooks/useGetHolderList.js";
import useEngineContext from "../../../../../hooks/useEngineContext.js";
import useAddHolder, { useFormDataConfig } from "../../hooks/useAddHolder.js";
import { formatAddFormValues } from "../../../forms/format.js";
import ChangePetModal_default from "../../pet/ChangePetModal/index.js";
import Pet from "../../pet/index.js";
import useClientFn from "../hooks/useClientFn.js";
import SelectDrawer_default from "./SelectDrawer.js";
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { Avatar, Button, Dropdown, Empty, Skeleton } from "antd";
import { image, locales } from "@pisell/utils";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import User01 from "@pisell/icon/es/User01";
import classNames from "classnames";
import { useMemoizedFn } from "ahooks";
import "./index.less";
//#region src/components/booking/info/clientVariant/vertical/index.tsx
const VerticalClient = forwardRef((props, ref) => {
	var _context$appHelper, _context$appHelper$ge, _state$bookingConfig2, _state$bookingConfig4, _state$pet3, _state$pet4, _state$pet6, _state$pet8, _state$client$value3, _state$bookingConfig7, _state$pet9, _state$bookingConfig8, _state$service2, _modalRef$current3, _state$client$value5, _state$client$value6, _state$client$value7, _state$client$value8, _state$client$value9, _state$client$value10, _state$client$value11, _state$client$value12, _state$client$value13, _context$appHelper2, _context$appHelper2$i, _state$bookingConfig9, _state$client6;
	const { globalState, setGlobalState } = props;
	const modalRef = useRef();
	const state = globalState;
	const stateRef = useRef(state);
	const prevCustomerId = useRef(null);
	const changePetRef = useRef(null);
	const context = useEngineContext();
	const [isHasFormRecord, setIsHasFormRecord] = useState(true);
	const isFranchisee = context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.businessUtils) === null || _context$appHelper === void 0 || (_context$appHelper$ge = _context$appHelper.getAppByModal) === null || _context$appHelper$ge === void 0 ? void 0 : _context$appHelper$ge.call(_context$appHelper, "franchisee");
	request.setRequest(context.appHelper.utils.request);
	state.isFranchisee = isFranchisee;
	stateRef.current = state;
	const { isWalkIn, setClient, handleSelectClient, menuChange, handleViewClient, menus, handleCreateItem, getClients, params, searchChange, loading, loadMore, handleOpenClientModal, getNickname, franchiseeLoading } = useClientFn({
		state,
		setGlobalState,
		modalRef,
		onRemoveClient: () => {
			setTimeout(() => {
				handleSelectPet({ [boardConfig.form_id]: [] });
			});
		}
	});
	console.log("state.modalOpen", state.modalOpen);
	const renderList = useMemo(() => {
		return moveItemToFront([...state.client.clients], state.client.value.id);
	}, [state.client.clients, state.client.value.id]);
	const handleClose = () => {
		setTimeout(() => {
			setClient({ showModal: false });
		});
	};
	const petDispatch = ({ type, payload }) => {
		if (type === "setPet") setGlobalState({ pet: _objectSpread2(_objectSpread2({}, stateRef.current.pet), payload) });
		if (type === "setService") setGlobalState({ service: _objectSpread2(_objectSpread2({}, stateRef.current.service), payload) });
	};
	const getHolderList = useGetHolderList(state, petDispatch);
	const { waiverForm } = useAddHolder(state, petDispatch);
	const { isMinorAndWaiver } = useFormDataConfig(state);
	const boardConfig = useMemo(() => {
		var _state$bookingConfig;
		return (state === null || state === void 0 || (_state$bookingConfig = state.bookingConfig) === null || _state$bookingConfig === void 0 || (_state$bookingConfig = _state$bookingConfig.config) === null || _state$bookingConfig === void 0 || (_state$bookingConfig = _state$bookingConfig.basic) === null || _state$bookingConfig === void 0 ? void 0 : _state$bookingConfig.appointment_subject) || {};
	}, [state === null || state === void 0 || (_state$bookingConfig2 = state.bookingConfig) === null || _state$bookingConfig2 === void 0 || (_state$bookingConfig2 = _state$bookingConfig2.config) === null || _state$bookingConfig2 === void 0 ? void 0 : _state$bookingConfig2.basic]);
	useEffect(() => {
		var _state$bookingConfig3;
		if ((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_customer) === null || _state$bookingConfig3 === void 0 ? void 0 : _state$bookingConfig3.type) === "customer" && (state === null || state === void 0 ? void 0 : state.modalOpen) && !(state === null || state === void 0 ? void 0 : state.bookingId)) handleOpenClientModal();
		else {
			modalRef.current.close();
			setClient({ showModal: false });
		}
	}, [state === null || state === void 0 || (_state$bookingConfig4 = state.bookingConfig) === null || _state$bookingConfig4 === void 0 || (_state$bookingConfig4 = _state$bookingConfig4.config) === null || _state$bookingConfig4 === void 0 || (_state$bookingConfig4 = _state$bookingConfig4.basic) === null || _state$bookingConfig4 === void 0 || (_state$bookingConfig4 = _state$bookingConfig4.appointment_customer) === null || _state$bookingConfig4 === void 0 ? void 0 : _state$bookingConfig4.type, state === null || state === void 0 ? void 0 : state.modalOpen]);
	const handleSelectPet = (val) => {
		if (isDayBooking(state)) {
			const { ids, lists } = isOpenDeletePet(state, val);
			if ((ids === null || ids === void 0 ? void 0 : ids.length) > 0 && (lists === null || lists === void 0 ? void 0 : lists.length) > 0) {
				var _changePetRef$current, _state$service;
				(_changePetRef$current = changePetRef.current) === null || _changePetRef$current === void 0 || _changePetRef$current.open({
					ids,
					setGlobalState,
					service: ((_state$service = state.service) === null || _state$service === void 0 ? void 0 : _state$service.value) || [],
					state
				});
			}
		}
		setGlobalState({ pet: _objectSpread2(_objectSpread2({}, state.pet), {}, {
			edit: true,
			value: val
		}) });
	};
	const handleOpenModal = useMemoizedFn(() => {
		handleOpenClientModal();
	});
	const handleAddPet = (_client, cb) => {
		var _state$pet$formData, _state$pet$formData2;
		let _data = { formDataConfig: isMinorAndWaiver ? _objectSpread2(_objectSpread2({}, waiverForm), {}, {
			customer_id: _client.id,
			is_franchisor: (_state$pet$formData = state.pet.formData) === null || _state$pet$formData === void 0 || (_state$pet$formData = _state$pet$formData[0]) === null || _state$pet$formData === void 0 ? void 0 : _state$pet$formData.is_franchisor
		}) : _objectSpread2({}, ((_state$pet$formData2 = state.pet.formData) === null || _state$pet$formData2 === void 0 ? void 0 : _state$pet$formData2[0]) || {}) };
		_data.customerId = _client.id;
		state.action({
			type: "pisell1.goCustomFormAddData",
			data: _data,
			callback: (res) => {
				if (isMinorAndWaiver) {
					getClients(params);
					getHolderList();
					return;
				}
				const newFormRecordObj = res.reduce((p, c) => {
					return _objectSpread2(_objectSpread2({}, p), {}, { [c.key]: c.value });
				}, {});
				setClient({ clients: stateRef.current.client.clients.map((item) => {
					if (item.id === _client.id) return _objectSpread2(_objectSpread2({}, item), {}, { form_record: [...item.form_record, _objectSpread2(_objectSpread2({}, newFormRecordObj), {}, {
						id: newFormRecordObj.form_record_id,
						data: newFormRecordObj
					})] });
					return item;
				}) });
				cb === null || cb === void 0 || cb(newFormRecordObj);
			}
		});
	};
	const previewItemTitleRender = useMemoizedFn((value, index, values) => {
		var _value$customer, _value$customer2, _value$customer3, _value$customer4, _state$pet$formData3;
		const title = getNickname(value.customer) || (value === null || value === void 0 || (_value$customer = value.customer) === null || _value$customer === void 0 ? void 0 : _value$customer.email) || (value === null || value === void 0 || (_value$customer2 = value.customer) === null || _value$customer2 === void 0 ? void 0 : _value$customer2.phone) || "";
		if ((value === null || value === void 0 || (_value$customer3 = value.customer) === null || _value$customer3 === void 0 ? void 0 : _value$customer3.id) === prevCustomerId.current) {
			if (values.length === index + 1) prevCustomerId.current = null;
			return null;
		}
		prevCustomerId.current = value === null || value === void 0 || (_value$customer4 = value.customer) === null || _value$customer4 === void 0 ? void 0 : _value$customer4.id;
		if (values.length === index + 1) prevCustomerId.current = null;
		return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-pet-title" }, title, " ' ", ((_state$pet$formData3 = state.pet.formData) === null || _state$pet$formData3 === void 0 || (_state$pet$formData3 = _state$pet$formData3[0]) === null || _state$pet$formData3 === void 0 ? void 0 : _state$pet$formData3.title) || "");
	});
	const isShowAddBtn = useMemo(() => {
		var _state$pet, _state$pet2;
		const formId = (_state$pet = state.pet) === null || _state$pet === void 0 || (_state$pet = _state$pet.formData) === null || _state$pet === void 0 || (_state$pet = _state$pet[0]) === null || _state$pet === void 0 ? void 0 : _state$pet.form_id;
		if ((!isWalkIn || ((_state$pet2 = state.pet) === null || _state$pet2 === void 0 || (_state$pet2 = _state$pet2.value) === null || _state$pet2 === void 0 || (_state$pet2 = _state$pet2[formId]) === null || _state$pet2 === void 0 ? void 0 : _state$pet2.length)) && !(state === null || state === void 0 ? void 0 : state.disabledEdit) && boardConfig.type === "form") return true;
		return false;
	}, [
		isWalkIn,
		state === null || state === void 0 ? void 0 : state.disabledEdit,
		(_state$pet3 = state.pet) === null || _state$pet3 === void 0 ? void 0 : _state$pet3.value,
		(_state$pet4 = state.pet) === null || _state$pet4 === void 0 ? void 0 : _state$pet4.formData,
		boardConfig.type
	]);
	const formId = useMemo(() => {
		var _state$pet5;
		return (_state$pet5 = state.pet) === null || _state$pet5 === void 0 || (_state$pet5 = _state$pet5.formData) === null || _state$pet5 === void 0 || (_state$pet5 = _state$pet5[0]) === null || _state$pet5 === void 0 ? void 0 : _state$pet5.form_id;
	}, [(_state$pet6 = state.pet) === null || _state$pet6 === void 0 || (_state$pet6 = _state$pet6.formData) === null || _state$pet6 === void 0 || (_state$pet6 = _state$pet6[0]) === null || _state$pet6 === void 0 ? void 0 : _state$pet6.form_id]);
	const currentPetValue = useMemo(() => {
		var _state$pet7;
		return (_state$pet7 = state.pet) === null || _state$pet7 === void 0 || (_state$pet7 = _state$pet7.value) === null || _state$pet7 === void 0 ? void 0 : _state$pet7[formId];
	}, [(_state$pet8 = state.pet) === null || _state$pet8 === void 0 ? void 0 : _state$pet8.value, formId]);
	const getCurrentClientSearchValue = useCallback(() => {
		var _state$client$value, _state$client$value2;
		let searchVal = getNickname(state.client.value) || ((_state$client$value = state.client.value) === null || _state$client$value === void 0 ? void 0 : _state$client$value.email) || ((_state$client$value2 = state.client.value) === null || _state$client$value2 === void 0 ? void 0 : _state$client$value2.phone) || "";
		if (isWalkIn) searchVal = "";
		return searchVal;
	}, [state.client.value, isWalkIn]);
	useEffect(() => {
		if (!isWalkIn && formId && !(currentPetValue === null || currentPetValue === void 0 ? void 0 : currentPetValue.length) && boardConfig.type === "form") (function() {
			var _ref = _asyncToGenerator(function* () {
				var _stateRef$current;
				const findCurrentClient = (list) => {
					return list.find((item) => {
						var _state$client;
						return item.id === ((_state$client = state.client) === null || _state$client === void 0 || (_state$client = _state$client.value) === null || _state$client === void 0 ? void 0 : _state$client.id);
					});
				};
				const currentClient = findCurrentClient((_stateRef$current = stateRef.current) === null || _stateRef$current === void 0 || (_stateRef$current = _stateRef$current.client) === null || _stateRef$current === void 0 ? void 0 : _stateRef$current.clients);
				if (currentClient) {
					var _currentClient$form_r;
					setIsHasFormRecord(!!(currentClient === null || currentClient === void 0 || (_currentClient$form_r = currentClient.form_record) === null || _currentClient$form_r === void 0 ? void 0 : _currentClient$form_r.length));
				} else {
					var _state$client2, _currentClient$form_r2;
					const currentClient = findCurrentClient(yield getClients({
						with: ["formRecord", "contactsInfo"],
						relation_form_id: boardConfig === null || boardConfig === void 0 ? void 0 : boardConfig.form_id,
						skip: 1,
						num: 20,
						customer_ids: [(_state$client2 = state.client) === null || _state$client2 === void 0 || (_state$client2 = _state$client2.value) === null || _state$client2 === void 0 ? void 0 : _state$client2.id]
					}, true));
					setIsHasFormRecord(!!(currentClient === null || currentClient === void 0 || (_currentClient$form_r2 = currentClient.form_record) === null || _currentClient$form_r2 === void 0 ? void 0 : _currentClient$form_r2.length));
				}
			});
			return function getData() {
				return _ref.apply(this, arguments);
			};
		})()();
	}, [
		isWalkIn,
		formId,
		(_state$client$value3 = state.client.value) === null || _state$client$value3 === void 0 ? void 0 : _state$client$value3.id,
		currentPetValue,
		boardConfig
	]);
	const petRender = useMemo(() => {
		var _state$bookingConfig6;
		if (((state === null || state === void 0 ? void 0 : state.disabledEdit) || boardConfig.type !== "form") && !isDayBooking(state)) return null;
		return /* @__PURE__ */ React.createElement(React.Fragment, null, !(currentPetValue === null || currentPetValue === void 0 ? void 0 : currentPetValue.length) && !isHasFormRecord && !isWalkIn && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Empty, {
			style: { marginBottom: 0 },
			image: Empty.PRESENTED_IMAGE_SIMPLE,
			description: locales.getText("pisell2.text.variant-client-no-data")
		}), /* @__PURE__ */ React.createElement("div", {
			className: "pisell-lowcode__create-form-wrap",
			onClick: () => {
				var _state$client3;
				handleAddPet === null || handleAddPet === void 0 || handleAddPet(state === null || state === void 0 || (_state$client3 = state.client) === null || _state$client3 === void 0 ? void 0 : _state$client3.value, (addRecord = {}) => {
					setTimeout(() => {
						var _state$client4, _state$client5, _state$bookingConfig5;
						handleSelectPet({ [formId]: formatAddFormValues({
							clientId: state === null || state === void 0 || (_state$client4 = state.client) === null || _state$client4 === void 0 || (_state$client4 = _state$client4.value) === null || _state$client4 === void 0 ? void 0 : _state$client4.id,
							value: [_objectSpread2(_objectSpread2({}, addRecord), {}, { customer: state === null || state === void 0 || (_state$client5 = state.client) === null || _state$client5 === void 0 ? void 0 : _state$client5.value })],
							data_range: state === null || state === void 0 || (_state$bookingConfig5 = state.bookingConfig) === null || _state$bookingConfig5 === void 0 || (_state$bookingConfig5 = _state$bookingConfig5.holder) === null || _state$bookingConfig5 === void 0 ? void 0 : _state$bookingConfig5.data_range
						}) });
					}, 200);
				});
			}
		}, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PlusCircle, { className: "pisell-lowcode__create-form-icon" }), /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__create-form-txt" }, `${locales.getText("pisell2.text.create-new")} ${(state === null || state === void 0 || (_state$bookingConfig6 = state.bookingConfig) === null || _state$bookingConfig6 === void 0 || (_state$bookingConfig6 = _state$bookingConfig6.holder) === null || _state$bookingConfig6 === void 0 || (_state$bookingConfig6 = _state$bookingConfig6.form) === null || _state$bookingConfig6 === void 0 ? void 0 : _state$bookingConfig6.title) || "-"}`)))), /* @__PURE__ */ React.createElement(Pet, {
			clientChangeNotSetPet: true,
			state,
			dispatch: petDispatch,
			hideTitle: true,
			handleOpenModal,
			addButtonProps: {
				onClick: handleOpenClientModal,
				style: { display: "none" }
			},
			previewItemTitleRender
		}));
	}, [
		isWalkIn,
		isHasFormRecord,
		state === null || state === void 0 ? void 0 : state.disabledEdit,
		boardConfig.type,
		state === null || state === void 0 || (_state$bookingConfig7 = state.bookingConfig) === null || _state$bookingConfig7 === void 0 || (_state$bookingConfig7 = _state$bookingConfig7.holder) === null || _state$bookingConfig7 === void 0 || (_state$bookingConfig7 = _state$bookingConfig7.form) === null || _state$bookingConfig7 === void 0 ? void 0 : _state$bookingConfig7.title,
		(_state$pet9 = state.pet) === null || _state$pet9 === void 0 || (_state$pet9 = _state$pet9.formData) === null || _state$pet9 === void 0 ? void 0 : _state$pet9[0],
		state,
		petDispatch,
		handleOpenModal,
		handleOpenClientModal,
		previewItemTitleRender,
		handleAddPet,
		currentPetValue,
		formId,
		state === null || state === void 0 || (_state$bookingConfig8 = state.bookingConfig) === null || _state$bookingConfig8 === void 0 || (_state$bookingConfig8 = _state$bookingConfig8.holder) === null || _state$bookingConfig8 === void 0 ? void 0 : _state$bookingConfig8.data_range,
		(_state$service2 = state.service) === null || _state$service2 === void 0 ? void 0 : _state$service2.value
	]);
	const handleOpenClient = () => {
		if (!isWalkIn || (state === null || state === void 0 ? void 0 : state.disableEventBookingEdit)) return;
		handleOpenClientModal();
	};
	useImperativeHandle(ref, () => {
		var _modalRef$current, _modalRef$current2;
		return {
			open: handleOpenClientModal,
			close: (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.close,
			setSearch: (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 ? void 0 : _modalRef$current2.setSearch
		};
	});
	setClientVariantClose((_modalRef$current3 = modalRef.current) === null || _modalRef$current3 === void 0 ? void 0 : _modalRef$current3.close);
	/**
	* @title: 是否打开更改商品弹窗
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: WangHan
	* @Date: 2024-12-30 22:40
	*/
	const isOpenDeleteProduct = useMemo(() => {
		if (!isDayBooking(state)) return false;
		const pets = getPets(state);
		const appointmentServices = getAppointmentService(state);
		if ((pets === null || pets === void 0 ? void 0 : pets.length) && ((appointmentServices === null || appointmentServices === void 0 ? void 0 : appointmentServices.length) || isEventBooking(state))) return true;
		return false;
	}, [state]);
	/**
	* @title: 更改了客户
	* @description:
	* @param {any} e
	* @return {*}
	* @Author: WangHan
	* @Date: 2024-12-31 14:48
	*/
	const _handleSelectClient = function() {
		var _ref2 = _asyncToGenerator(function* (e) {
			handleSelectClient(e);
			if (isDayBooking(state)) {
				var _state$service3, _state$client$value4;
				let _value = (e === null || e === void 0 ? void 0 : e[e.length - 1]) || walkInData;
				if (_value.loading) return;
				if (isDayBooking(state) && (state === null || state === void 0 || (_state$service3 = state.service) === null || _state$service3 === void 0 || (_state$service3 = _state$service3.value) === null || _state$service3 === void 0 ? void 0 : _state$service3.length) > 0 && ((_state$client$value4 = state.client.value) === null || _state$client$value4 === void 0 ? void 0 : _state$client$value4.id) !== (_value === null || _value === void 0 ? void 0 : _value.id)) {
					const _state = _objectSpread2(_objectSpread2({}, state), {}, { client: _objectSpread2(_objectSpread2({}, state.client), {}, { value: _objectSpread2(_objectSpread2({}, _value), {}, { name: getNickname(_value) }) }) });
					if (isOpenDeleteProduct) {
						var _changePetRef$current2, _state$service4;
						(_changePetRef$current2 = changePetRef.current) === null || _changePetRef$current2 === void 0 || _changePetRef$current2.open({
							setGlobalState,
							service: ((_state$service4 = state.service) === null || _state$service4 === void 0 ? void 0 : _state$service4.value) || [],
							state,
							source: "changeClient"
						});
					}
					const services = yield updateServicePrice(_state);
					console.log(services, state, _value, isOpenDeleteProduct, "wh98797686");
					setGlobalState({ service: _objectSpread2(_objectSpread2({}, stateRef.current.service), {}, {
						value: services,
						edit: true
					}) });
				}
			}
		});
		return function _handleSelectClient(_x) {
			return _ref2.apply(this, arguments);
		};
	}();
	return /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-lowcode__booking-vertical-client-wrap", { ["create-booking-page-vertical-client-wrap"]: state.isBookingCreatePage }) }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-lowcode__booking-vertical-client", { "pisell-lowcode__booking-vertical-client-walkin": isWalkIn }),
		onClick: handleOpenClient
	}, /* @__PURE__ */ React.createElement(Skeleton, {
		loading: false,
		active: true,
		round: true
	}, /* @__PURE__ */ React.createElement(Avatar, {
		className: "pisell-lowcode__booking-client-avatar",
		src: image.ali((_state$client$value5 = state.client.value) === null || _state$client$value5 === void 0 ? void 0 : _state$client$value5.cover, 100),
		size: 64,
		icon: /* @__PURE__ */ React.createElement(User01, { className: "pisell-lowcode__booking-client-list-item-avatar-icon" })
	}), isWalkIn ? /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-info-desc" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-title" }, locales.getText("pisell2.text.add-client")), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, locales.getText("pisell2.text.leave-empty-for-walk-in"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-title" }, getNickname(state.client.value)), ((_state$client$value6 = state.client.value) === null || _state$client$value6 === void 0 ? void 0 : _state$client$value6.email) ? /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_state$client$value7 = state.client.value) === null || _state$client$value7 === void 0 ? void 0 : _state$client$value7.email) : null, ((_state$client$value8 = state.client.value) === null || _state$client$value8 === void 0 ? void 0 : _state$client$value8.phone) ? /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-desc-item" }, (_state$client$value9 = state.client.value) === null || _state$client$value9 === void 0 ? void 0 : _state$client$value9.phone) : null, !!((_state$client$value10 = state.client.value) === null || _state$client$value10 === void 0 || (_state$client$value10 = _state$client$value10.waiver_form) === null || _state$client$value10 === void 0 ? void 0 : _state$client$value10.length) && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__booking-client-waiver",
		title: getWaiverTitle((_state$client$value11 = state.client.value) === null || _state$client$value11 === void 0 ? void 0 : _state$client$value11.waiver_form)
	}, (_state$client$value12 = state.client.value) === null || _state$client$value12 === void 0 || (_state$client$value12 = _state$client$value12.waiver_form) === null || _state$client$value12 === void 0 || (_state$client$value13 = _state$client$value12.map) === null || _state$client$value13 === void 0 ? void 0 : _state$client$value13.call(_state$client$value12, (item) => {
		return /* @__PURE__ */ React.createElement("span", null, item.form_title, /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-client-waiver-colon" }, ":"), item.is_filled ? /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-client-waiver-filled" }, locales.getText("pisell2.text.filled")) : /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__booking-client-waiver-not-filled" }, locales.getText("pisell2.text.not-filled")), ` ; `);
	}))), !isWalkIn && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-client-action-wrap" }, !state.disabledEdit && /* @__PURE__ */ React.createElement(Dropdown.Button, {
		menu: {
			items: menus,
			onClick: menuChange
		},
		placement: "bottomRight",
		onClick: () => handleOpenClientModal()
	}, locales.getText("pisell2.text.variant-client-change")), /* @__PURE__ */ React.createElement(Button, { onClick: (e) => {
		e.stopPropagation();
		handleViewClient();
	} }, locales.getText("pisell2.text.view-profile"))))), /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-lowcode__booking-vertical-pet", { "pisell-lowcode__booking-vertical-pet-walkin": isWalkIn }),
		onClick: handleOpenClient
	}, petRender), isShowAddBtn && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-vertical-footer" }, /* @__PURE__ */ React.createElement(Button, {
		onClick: () => {
			const currentClientSearchValue = getCurrentClientSearchValue();
			modalRef.current.setSearch(currentClientSearchValue);
			handleOpenClientModal(currentClientSearchValue);
		},
		block: true,
		size: "large"
	}, locales.getText("pisell2.text.select"))), /* @__PURE__ */ React.createElement(SelectDrawer_default, {
		showHeader: !state.isBookingCreatePage,
		modalOpen: state.modalOpen,
		loading,
		autoFocus: !(context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$i = _context$appHelper2.isTerminal) === null || _context$appHelper2$i === void 0 ? void 0 : _context$appHelper2$i.call(_context$appHelper2)),
		ref: modalRef,
		onClose: handleClose,
		handleSelectClient: _handleSelectClient,
		handleCreateItem,
		childrenValue: state.pet.value,
		handleSelectPet,
		formData: state.pet.formData,
		searchChange,
		options: renderList,
		holder: state === null || state === void 0 || (_state$bookingConfig9 = state.bookingConfig) === null || _state$bookingConfig9 === void 0 ? void 0 : _state$bookingConfig9.holder,
		client: state === null || state === void 0 || (_state$client6 = state.client) === null || _state$client6 === void 0 ? void 0 : _state$client6.value,
		loadMore,
		showPet: (boardConfig === null || boardConfig === void 0 ? void 0 : boardConfig.type) === "form",
		handleAddPet,
		franchiseeLoading,
		showWalkIn: !isDayBooking(state)
	}), /* @__PURE__ */ React.createElement(ChangePetModal_default, { ref: changePetRef }));
});
//#endregion
export { VerticalClient as default };
