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 Drawer$1 from "../drawer/index.js";
import AddButton from "../addButton/index.js";
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { Button, Checkbox, Dropdown, Input, List, Skeleton } from "antd";
import { changeArray, getItemByArray, locales } from "@pisell/utils";
import PlusCircle from "@pisell/icon/es/PlusCircle";
import DotsVertical from "@pisell/icon/es/DotsVertical";
import SearchLg from "@pisell/icon/es/SearchLg";
import classNames from "classnames";
import "./index.less";
//#region src/components/booking/components/customSelect/index.tsx
/**
* @title: 选择器
* @description:
* @param {CustomSelectProps} props
* @param {any} ref
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-01-30 16:44
*/
const CustomSelect = (props, ref) => {
	const { loading, options, onValueChange, value, rowKey = "id", addButtonProps, drawerProps, createItemText = "", previewItemRender, previewItemTitleRender, addButtonRender, optionRender, filterItem, previewItemClassName, optionClassName, mode = "single", isPreview = true, name = "item", handleCreateItem, handleViewItem, virtualListHeight = window.innerHeight - 213 - 16, disabled = false, searchValue, searchChange, onVirtualListScroll, loadMore, modalOpen, closeCallback, autoFocus, showDropDown = true, handleOpenModal: propsHandleOpenModal, handleDayChange } = props;
	console.log("custom select");
	const searchRef = useRef();
	const [_value, set_value] = useState([]);
	const [search, setSearch] = useState("");
	const [open, setOpen] = useState(false);
	useEffect(() => {
		if (modalOpen === false) setOpen(false);
	}, [modalOpen]);
	useEffect(() => {
		initValue();
	}, [useMemo(() => {
		return JSON.stringify(value);
	}, [value])]);
	/**
	* @title: 转换value到内部
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:45
	*/
	const initValue = () => {
		let _val = value;
		if (!value) _val = [];
		else if (!Array.isArray(value)) _val = [value];
		set_value(_val);
	};
	/**
	* @title: 关闭弹窗
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:45
	*/
	const closeDrawer = (reset) => {
		setOpen(false);
		setSearch("");
		if (reset) initValue();
		closeCallback === null || closeCallback === void 0 || closeCallback();
	};
	/**
	* @title: 打开弹窗
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:45
	*/
	const handleOpenModal = (item) => {
		if (disabled) return;
		if (propsHandleOpenModal) {
			propsHandleOpenModal();
			return;
		}
		if (addButtonProps === null || addButtonProps === void 0 ? void 0 : addButtonProps.addCallback) addButtonProps === null || addButtonProps === void 0 || addButtonProps.addCallback();
		setOpen(true);
		initValue();
		if (autoFocus) setTimeout(() => {
			var _searchRef$current, _searchRef$current$fo;
			(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || (_searchRef$current$fo = _searchRef$current.focus) === null || _searchRef$current$fo === void 0 || _searchRef$current$fo.call(_searchRef$current);
		}, 100);
	};
	/**
	* @title: value 发生变化传递到外部
	* @description:
	* @param {any} _val
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:46
	*/
	const _onValueChange = function() {
		var _ref = _asyncToGenerator(function* (_val) {
			yield onValueChange(_val);
		});
		return function _onValueChange(_x) {
			return _ref.apply(this, arguments);
		};
	}();
	/**
	* @title: 选择
	* @description:
	* @param {any} item
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:46
	*/
	const handleSelectItem = (item) => {
		let _val = changeArray(_value, item, rowKey);
		if (mode === "single") handleApply([item]);
		set_value(_val);
	};
	/**
	* @title: 预览事件
	* @description:
	* @param {any} item
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:46
	*/
	const _handleViewItem = (item) => {
		handleViewItem === null || handleViewItem === void 0 || handleViewItem(item);
	};
	/**
	* @title: 删除事件
	* @description:
	* @param {any} item
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:47
	*/
	const handleRemoveItem = (item) => {
		if (handleDayChange) handleDayChange(item);
		let _arr = changeArray(_value, item, rowKey);
		_onValueChange(_arr);
		set_value(_arr);
	};
	const menuChange = (e, item) => {
		({
			view: _handleViewItem,
			change: handleOpenModal,
			remove: handleRemoveItem
		})[e.key](item);
	};
	/**
	* @title: 渲染列表
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:47
	*/
	const renderList = useMemo(() => {
		let _list = [...options];
		if (search) {
			const isIncludes = (item) => {
				try {
					const q = search.toLowerCase();
					const numericKeys = Object.keys(item).filter((k) => /^\d+$/.test(k));
					const customerKeys = [
						"customer_nickname",
						"customer_first_name",
						"customer_last_name",
						"customer_phone",
						"customer_email"
					];
					return [...numericKeys, ...customerKeys].some((k) => {
						const val = item[k];
						if (val === null || val === void 0) return false;
						try {
							const str = JSON.stringify(val);
							return str.includes(q) || str.toLocaleLowerCase().includes(q);
						} catch (error) {
							return false;
						}
					});
				} catch (e) {
					return false;
				}
			};
			_list = _list.filter((d) => {
				if (filterItem) return filterItem(d, search);
				return isIncludes(d);
			});
		}
		return _list;
	}, [
		options,
		loading,
		search
	]);
	/**
	* @title: 是否展示添加其他
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:47
	*/
	const isMore = useMemo(() => {
		return _value.length > 0;
	}, [_value]);
	/**
	* @title: 确定按钮, 返回数据并关闭弹窗
	* @description:
	* @param {any} _val
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:47
	*/
	const handleApply = function() {
		var _ref2 = _asyncToGenerator(function* (_val) {
			yield _onValueChange(_val || _value);
			closeDrawer();
		});
		return function handleApply(_x2) {
			return _ref2.apply(this, arguments);
		};
	}();
	useImperativeHandle(ref, () => {
		return {
			open: handleOpenModal,
			setValue: set_value
		};
	});
	/**
	* @title: 菜单列表
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:48
	*/
	const menuItems = useMemo(() => {
		let list = [
			{
				key: "view",
				label: `${locales.getText("pisell2.text.view")} ${name}`
			},
			{
				key: "change",
				label: `${locales.getText("pisell2.text.change")} ${name}`
			},
			{
				key: "remove",
				label: `${locales.getText("pisell2.text.remove")} ${name}`
			}
		];
		if (disabled) list = list.filter((d) => d.key === "view");
		return list;
	}, [
		name,
		disabled,
		locales
	]);
	/**
	* @title: 是否展示 add
	* @description:
	* @param {*} useMemo
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:49
	*/
	const isShowAddButton = useMemo(() => {
		return (mode === "multiple" || mode === "single" && !isMore) && !disabled;
	}, [
		mode,
		isMore,
		disabled
	]);
	return /* @__PURE__ */ React.createElement("div", null, isPreview ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__custom-select-cards" }, _value.map((d, index) => {
		return /* @__PURE__ */ React.createElement(React.Fragment, null, previewItemTitleRender === null || previewItemTitleRender === void 0 ? void 0 : previewItemTitleRender(d, index, _value), /* @__PURE__ */ React.createElement("div", {
			className: classNames("pisell-lowcode__custom-select-card", previewItemClassName),
			key: d[rowKey]
		}, previewItemRender === null || previewItemRender === void 0 ? void 0 : previewItemRender(d), showDropDown && /* @__PURE__ */ React.createElement("div", { onClick: (e) => {
			e.preventDefault();
			e.stopPropagation();
		} }, /* @__PURE__ */ React.createElement(Dropdown, {
			menu: {
				items: menuItems,
				onClick: (e) => {
					menuChange(e, d);
				}
			},
			placement: "bottomRight"
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__custom-select-card-menu-wrap" }, /* @__PURE__ */ React.createElement(DotsVertical, { className: "pisell-lowcode__custom-select-card-menu-icon" }))))));
	})), isShowAddButton ? addButtonRender ? addButtonRender() : /* @__PURE__ */ React.createElement(AddButton, _objectSpread2(_objectSpread2({ showSub: isMore }, addButtonProps), {}, { onClick: () => {
		if (addButtonProps.onClick) {
			addButtonProps.onClick();
			return;
		}
		handleOpenModal();
	} })) : disabled ? /* @__PURE__ */ React.createElement("div", { style: { height: 20 } }) : null) : null, /* @__PURE__ */ React.createElement(Drawer$1, _objectSpread2(_objectSpread2({
		open,
		onClose: () => {
			closeDrawer(true);
		},
		titleNoWrap: true,
		header: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Input, {
			ref: searchRef,
			prefix: /* @__PURE__ */ React.createElement(SearchLg, null),
			style: {
				marginTop: 16,
				height: 44
			},
			placeholder: locales.getText("pisell2.booking.text.search-placeholder"),
			value: search,
			allowClear: true,
			onChange: (e) => {
				setSearch(e.target.value);
				if (searchChange) searchChange(e.target.value);
			}
		}), /* @__PURE__ */ React.createElement("div", {
			className: "pisell-lowcode__custom-select-create",
			onClick: () => {
				handleCreateItem === null || handleCreateItem === void 0 || handleCreateItem();
			},
			style: { padding: createItemText ? 16 : "16px 0 0 0" }
		}, createItemText && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PlusCircle, { className: "pisell-lowcode__custom-select-create-icon" }), /* @__PURE__ */ React.createElement("span", { className: "pisell-lowcode__custom-select-create-txt" }, createItemText))))
	}, drawerProps), {}, { footer: mode === "multiple" && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, {
		style: { width: "100%" },
		type: "primary",
		size: "large",
		onClick: () => {
			handleApply();
		}
	}, locales.getText("pisell2.text.apply"))) }), /* @__PURE__ */ React.createElement(List, {
		itemLayout: "horizontal",
		dataSource: renderList,
		loading: {
			spinning: !!loading,
			delay: 500
		},
		loadMore,
		renderItem: (item) => /* @__PURE__ */ React.createElement(List.Item, {
			className: classNames("pisell-lowcode__custom-select-card-list-item", optionClassName, { "pisell-lowcode__custom-select-card-list-item-active": getItemByArray(_value, item, rowKey) }),
			onClick: () => {
				if ((item === null || item === void 0 ? void 0 : item.status) === "expired") return;
				handleSelectItem(item);
			},
			id: item[rowKey]
		}, item.loading ? /* @__PURE__ */ React.createElement(Skeleton, {
			active: true,
			round: true,
			loading: item.loading,
			avatar: true,
			paragraph: false
		}) : /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__custom-select-card-list-item-content" }, mode === "multiple" && /* @__PURE__ */ React.createElement(Checkbox, {
			disabled: (item === null || item === void 0 ? void 0 : item.status) === "expired",
			className: "custom-select-checkbox",
			checked: getItemByArray(_value, item, rowKey)
		}), optionRender(item)))
	})));
};
var customSelect_default = forwardRef(CustomSelect);
//#endregion
export { customSelect_default as default };
