import { _asyncToGenerator } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import React, { memo, useCallback, useMemo, useState } from "react";
import { Spin } from "antd";
import { locales } from "@pisell/utils";
import { Image as Image$1, PisellEmpty, PisellInput } from "@pisell/materials";
import { SearchOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/webPosLogin/components/SelectStore/index.tsx
/** 默认店铺图标 */
const DEFAULT_STORE_ICON = "https://pisell2-dev.s3.cn-north-1.amazonaws.com.cn/static/default-store-icon.png";
/**
* 获取店铺显示名称
* @param store 店铺数据
* @param locale 语言
*/
const getStoreName = (store, locale = "en") => {
	var _store$tenant;
	const name = store === null || store === void 0 || (_store$tenant = store.tenant) === null || _store$tenant === void 0 ? void 0 : _store$tenant.name;
	if (!name) return "";
	return name[locale] || name.original || "";
};
/**
* 模糊搜索匹配
* @param store 店铺数据
* @param keyword 搜索关键词
* @param locale 语言
*/
const matchStore = (store, keyword, locale) => {
	var _store$tenant2;
	if (!keyword.trim()) return true;
	const lowerKeyword = keyword.toLowerCase();
	const name = store === null || store === void 0 || (_store$tenant2 = store.tenant) === null || _store$tenant2 === void 0 ? void 0 : _store$tenant2.name;
	return [
		name === null || name === void 0 ? void 0 : name.en,
		name === null || name === void 0 ? void 0 : name["zh-CN"],
		name === null || name === void 0 ? void 0 : name["zh-HK"],
		name === null || name === void 0 ? void 0 : name.original,
		store === null || store === void 0 ? void 0 : store.nickname
	].filter(Boolean).some((field) => field === null || field === void 0 ? void 0 : field.toLowerCase().includes(lowerKeyword));
};
/**
* SelectStore 店铺选择组件
* @description 展示店铺列表，支持搜索过滤和选择
*/
const SelectStore = memo((props) => {
	const { storeList = [], locale = "en", loading = false, lastUsedStoreId, onSelect } = props;
	/** 搜索关键词 */
	const [searchKeyword, setSearchKeyword] = useState("");
	/** 当前选中的店铺ID（用于显示点击loading） */
	const [selectingId, setSelectingId] = useState(null);
	/**
	* 过滤后的店铺列表
	*/
	const filteredStoreList = useMemo(() => {
		if (!searchKeyword.trim()) return storeList;
		return storeList.filter((store) => matchStore(store, searchKeyword, locale));
	}, [
		storeList,
		searchKeyword,
		locale
	]);
	/**
	* 处理搜索输入
	*/
	const handleSearchChange = useCallback((e) => {
		setSearchKeyword(e.target.value);
	}, []);
	/**
	* 处理店铺选择
	*/
	const handleSelectStore = useCallback(function() {
		var _ref = _asyncToGenerator(function* (store) {
			if (selectingId) return;
			setSelectingId(store.id);
			yield onSelect === null || onSelect === void 0 ? void 0 : onSelect(store);
			setSelectingId(null);
		});
		return function(_x) {
			return _ref.apply(this, arguments);
		};
	}(), [selectingId, onSelect]);
	/**
	* 渲染店铺列表项
	*/
	const renderStoreItem = (store) => {
		var _store$tenant3;
		const isLastUsed = lastUsedStoreId === store.id;
		const isSelecting = selectingId === store.id;
		const storeName = getStoreName(store, locale);
		const storeIcon = (store === null || store === void 0 || (_store$tenant3 = store.tenant) === null || _store$tenant3 === void 0 ? void 0 : _store$tenant3.logo) || DEFAULT_STORE_ICON;
		return /* @__PURE__ */ React.createElement("div", {
			key: store.id,
			className: `select-store__item ${isSelecting ? "select-store__item--selecting" : ""}`,
			onClick: () => handleSelectStore(store)
		}, /* @__PURE__ */ React.createElement("div", { className: "select-store__item-icon" }, /* @__PURE__ */ React.createElement(Image$1, {
			width: 48,
			height: 48,
			src: storeIcon,
			alt: storeName,
			fallbackType: "image",
			preview: false
		})), /* @__PURE__ */ React.createElement("div", { className: "select-store__item-content" }, /* @__PURE__ */ React.createElement("span", { className: "select-store__item-name" }, storeName)), /* @__PURE__ */ React.createElement("div", { className: "select-store__item-extra" }, isSelecting ? /* @__PURE__ */ React.createElement(Spin, { size: "small" }) : isLastUsed ? /* @__PURE__ */ React.createElement("span", { className: "select-store__item-tag" }, locales.getText("webpos-login-last-used")) : null));
	};
	return /* @__PURE__ */ React.createElement("div", { className: "select-store" }, /* @__PURE__ */ React.createElement("div", { className: "select-store__search" }, /* @__PURE__ */ React.createElement(PisellInput, {
		placeholder: locales.getText("webpos-login-search"),
		prefix: /* @__PURE__ */ React.createElement(SearchOutlined, { style: { color: "#999" } }),
		value: searchKeyword,
		onChange: handleSearchChange,
		allowClear: true,
		size: "large"
	})), /* @__PURE__ */ React.createElement("div", { className: "select-store__list" }, loading ? /* @__PURE__ */ React.createElement("div", { className: "select-store__loading" }, /* @__PURE__ */ React.createElement(Spin, { size: "large" })) : filteredStoreList.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "select-store__empty" }, /* @__PURE__ */ React.createElement(PisellEmpty, { description: locales.getText("webpos-login-select-store-empty") })) : filteredStoreList.map(renderStoreItem)));
});
SelectStore.displayName = "SelectStore";
//#endregion
export { SelectStore as default };
