import SearchSection from "../../../../pro/comprehensiveSearch/components/searchSection/index.js";
import { useGetShopId, useModal, useScanListener } from "../../hooks.js";
import { SEARCH_BAR_RESULT_HEADER_CONFIG } from "./const.js";
import { ECupScanStatus } from "../../types.js";
import { useCupScanStatus, useSearch } from "./hooks.js";
import CupStatusModal from "../CupStatusModal/index.js";
import dayjs from "dayjs";
import React, { useEffect, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { PisellToast } from "@pisell/materials";
import { useMemoizedFn } from "ahooks";
import "./index.less";
//#region src/components/ecocup/components/SearchBar/index.tsx
const SearchBar = (props) => {
	const { scanListenerKey, size = "large", placeholder, onSearch, searchType, onSearchResult, customerId, onCupStatusValidate } = props;
	const [value, setValue] = useState("");
	const [searchResult, setSearchResult] = useState(null);
	const containerRef = useRef(null);
	const { addListener, removeListener, setActiveListener } = useScanListener();
	const searchHook = useSearch();
	const { getCupScanStatus } = useCupScanStatus();
	const cupStatusModal = useModal("ecocup-cup-status-modal");
	const shopId = useGetShopId();
	const onSelectResult = useMemoizedFn((type, item) => {
		setSearchResult(null);
		setValue("");
		onSearchResult === null || onSearchResult === void 0 || onSearchResult({
			type,
			data: item
		});
	});
	const scanSearchCallback = useMemoizedFn((str) => {
		console.log("scanSearchCallback>>>>>>>", str);
		if (onSearch) {
			onSearch(str || "");
			return;
		}
		if (!str) {
			setValue("");
			setSearchResult(null);
			return;
		}
		searchHook.run({
			searchType,
			searchText: str
		}).then((res) => {
			if ((res === null || res === void 0 ? void 0 : res.status) === "success") {
				var _res$data2;
				if ((res === null || res === void 0 ? void 0 : res.type) === "cup") {
					var _res$data;
					const _cupData = (res === null || res === void 0 || (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data[0]) || null;
					const scanStatus = getCupScanStatus(_cupData, customerId);
					console.log(scanStatus, _cupData, shopId, "sjdhfjj");
					if (onCupStatusValidate) {
						if (scanStatus && scanStatus === ECupScanStatus.OTHER_RENT) {
							onCupStatusValidate === null || onCupStatusValidate === void 0 || onCupStatusValidate({ data: _cupData || { code: str } });
							setValue("");
							return;
						}
					}
					if (scanStatus) {
						cupStatusModal.open({ data: {
							scanStatus,
							cupData: _cupData || { code: str }
						} });
						return;
					}
				}
				const dataLength = (res === null || res === void 0 || (_res$data2 = res.data) === null || _res$data2 === void 0 ? void 0 : _res$data2.length) || 0;
				if (dataLength === 1) {
					var _res$data3;
					setValue("");
					setSearchResult(null);
					onSelectResult(res === null || res === void 0 ? void 0 : res.type, res === null || res === void 0 || (_res$data3 = res.data) === null || _res$data3 === void 0 ? void 0 : _res$data3[0]);
					return;
				}
				if (dataLength === 0 && (res === null || res === void 0 ? void 0 : res.type) === "customer") {
					PisellToast({ content: locales.getText("pisell2.text.ecocup.toast.fail-no-match-customer") });
					setSearchResult(null);
					return;
				}
				setSearchResult(res === null || res === void 0 ? void 0 : res.data);
			} else {
				if (res === null || res === void 0 ? void 0 : res.message) PisellToast({ content: res === null || res === void 0 ? void 0 : res.message });
				setSearchResult(null);
			}
		});
	});
	useEffect(() => {
		addListener(scanListenerKey, (result) => {
			setValue("");
			setSearchResult(null);
			scanSearchCallback((result === null || result === void 0 ? void 0 : result.value) || "");
		});
		return () => {
			removeListener(scanListenerKey);
		};
	}, [scanListenerKey, scanSearchCallback]);
	useEffect(() => {
		/**
		* 点击非搜索区域时隐藏结果面板
		*/
		const handleClickOutside = (event) => {
			const target = event.target;
			if (!containerRef.current || !target) return;
			if (!containerRef.current.contains(target) && (searchResult === null || searchResult === void 0 ? void 0 : searchResult.length) > 1) setSearchResult(null);
		};
		document.addEventListener("mousedown", handleClickOutside);
		return () => {
			document.removeEventListener("mousedown", handleClickOutside);
		};
	}, [searchResult]);
	return /* @__PURE__ */ React.createElement("div", {
		ref: containerRef,
		className: "ecocup-cup-search-bar"
	}, /* @__PURE__ */ React.createElement("div", {
		style: { flex: 1 },
		onClick: () => {
			console.log("onClick>>>>>>>", scanListenerKey);
			setActiveListener(scanListenerKey);
		}
	}, /* @__PURE__ */ React.createElement(SearchSection, {
		value,
		onChange: setValue,
		loading: searchHook.loading,
		style: {
			flex: 1,
			height: size === "large" ? "60px" : "48px",
			padding: 0
		},
		placeholder: placeholder || locales.getText("pisell2.text.cup-project.search-bar.placeholder"),
		searchButtonProps: {
			placement: "inside",
			style: size === "large" ? {
				height: 48,
				padding: 8,
				minWidth: 160
			} : {
				height: 32,
				padding: 8,
				minWidth: 120
			}
		},
		cameraButtonProps: { icon: ["pisell2-camera-01", "pisell2-qr-code-02"] },
		onSearch: () => scanSearchCallback(value)
	})), (searchResult === null || searchResult === void 0 ? void 0 : searchResult.length) > 1 ? /* @__PURE__ */ React.createElement("div", { className: "ecocup-cup-search-bar-result" }, /* @__PURE__ */ React.createElement("div", { className: "ecocup-cup-search-bar-result-header" }, SEARCH_BAR_RESULT_HEADER_CONFIG === null || SEARCH_BAR_RESULT_HEADER_CONFIG === void 0 ? void 0 : SEARCH_BAR_RESULT_HEADER_CONFIG.map((item) => /* @__PURE__ */ React.createElement("div", { key: item.key }, locales.getText(item.label)))), /* @__PURE__ */ React.createElement("div", { className: "ecocup-cup-search-bar-result-content" }, searchResult === null || searchResult === void 0 ? void 0 : searchResult.map((item) => {
		var _tags$find, _tags$find2;
		const { nickname, display_name, create_time, country_calling_code, phone, email, tags } = item;
		return /* @__PURE__ */ React.createElement("div", {
			key: item.id,
			className: "ecocup-cup-search-bar-result-content-item",
			onClick: () => onSelectResult("customer", item)
		}, /* @__PURE__ */ React.createElement("div", null, display_name || nickname || "-"), /* @__PURE__ */ React.createElement("div", null, create_time ? dayjs(create_time).format("DD/MM/YYYY") : "-"), /* @__PURE__ */ React.createElement("div", null, phone ? `(${country_calling_code}) ${phone}` : "-"), /* @__PURE__ */ React.createElement("div", null, email || "-"), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "ecocup-cup-search-bar-result-content-item-membership" }, (tags === null || tags === void 0 || (_tags$find = tags.find) === null || _tags$find === void 0 ? void 0 : _tags$find.call(tags, (v) => (v === null || v === void 0 ? void 0 : v.name) == "admin")) ? "Admin" : (tags === null || tags === void 0 || (_tags$find2 = tags.find) === null || _tags$find2 === void 0 ? void 0 : _tags$find2.call(tags, (v) => (v === null || v === void 0 ? void 0 : v.name) == "business")) ? "Business" : "Regular")));
	}))) : null, cupStatusModal.visible && /* @__PURE__ */ React.createElement(CupStatusModal, cupStatusModal.modalProps));
};
//#endregion
export { SearchBar as default };
