import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { formatProductListByCategory } from "../booking/utils.js";
import Drawer$1 from "../booking/components/drawer/index.js";
import AddButton from "../booking/components/addButton/index.js";
import TabProduct from "../tabProduct/index.js";
import React, { useMemo, useState } from "react";
import { Input, Skeleton } from "antd";
import { changeArray } from "@pisell/utils";
import SearchLg from "@pisell/icon/es/SearchLg";
import classNames from "classnames";
import "./index.less";
//#region src/components/selectModal/index.tsx
const MAX_LENGTH = 999;
const SelectModal = (props) => {
	const { value, onChange, dataSource = [], renderValueItem, renderOptionItem, disabled, className, style, maxLength = MAX_LENGTH, buttonProps, drawerProps, tabProductProps, loading } = props;
	const [open, setOpen] = useState(false);
	const [search, setSearch] = useState("");
	const _value = useMemo(() => {
		return value || [];
	}, [value]);
	const onOpen = () => {
		setOpen(true);
	};
	const onClose = () => {
		setSearch("");
		setOpen(false);
	};
	const renderList = useMemo(() => {
		let _list = dataSource || [];
		const isIncludes = (str) => {
			return str.toLowerCase().indexOf(search.toLowerCase()) !== -1;
		};
		return formatProductListByCategory(_list, search ? (item) => isIncludes(item.title) : void 0);
	}, [search, dataSource]);
	const onSelect = (item) => {
		onChange === null || onChange === void 0 || onChange(changeArray(_value, item, "id"));
		onClose();
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell2-select-modal", className),
		style
	}, /* @__PURE__ */ React.createElement(Skeleton, {
		active: true,
		round: true,
		loading
	}, _value.map((item) => {
		return renderValueItem === null || renderValueItem === void 0 ? void 0 : renderValueItem(item, (item) => {
			onOpen();
		});
	})), _value.length < maxLength ? /* @__PURE__ */ React.createElement(AddButton, _objectSpread2({ onClick: onOpen }, buttonProps)) : null, /* @__PURE__ */ React.createElement(Drawer$1, _objectSpread2({
		open,
		onClose,
		header: /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-service-header" }, /* @__PURE__ */ React.createElement(Input, {
			prefix: /* @__PURE__ */ React.createElement(SearchLg, null),
			style: {
				marginTop: 16,
				height: 44
			},
			placeholder: "",
			allowClear: true,
			value: search,
			onChange: (e) => {
				setSearch(e.target.value);
			}
		}))
	}, drawerProps), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__booking-service-body" }, /* @__PURE__ */ React.createElement(TabProduct, _objectSpread2(_objectSpread2({ list: renderList }, tabProductProps), {}, { renderItem: (item) => {
		return renderOptionItem === null || renderOptionItem === void 0 ? void 0 : renderOptionItem(item, onSelect);
	} })))));
};
//#endregion
export { SelectModal as default };
