const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_useEngineContext = require("../../../../hooks/useEngineContext.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _ant_design_icons = require("@ant-design/icons");
let _pisell_icon = require("@pisell/icon");
//#region src/components/systemSettings/registry/components/SectionList.tsx
const getLocalizedText = (text, locale = "zh-CN") => {
	if (typeof text === "string") return text;
	return text[locale] || text.original || text.en || "";
};
const sectionIcons = {
	order: /* @__PURE__ */ react.default.createElement(_ant_design_icons.ShoppingCartOutlined, null),
	payment: /* @__PURE__ */ react.default.createElement(_ant_design_icons.CreditCardOutlined, null),
	auth: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SafetyCertificateOutlined, null),
	default: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SettingOutlined, null)
};
const renderSectionIcon = (iconName, code) => {
	if (iconName === "pisell2-shopping-cart-01") return /* @__PURE__ */ react.default.createElement(_pisell_icon.ShoppingCart01, null);
	if (code && sectionIcons[code]) return sectionIcons[code];
	return sectionIcons.default;
};
const SectionList = ({ sections, selectedSectionId, onSectionSelect, loading = false, hasMore = false, onLoadMore }) => {
	var _context$engine;
	const scrollContainerRef = (0, react.useRef)(null);
	const loadingRef = (0, react.useRef)(null);
	const context = require_useEngineContext.default();
	const currentLocale = (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || localStorage.getItem("umi_locale") || "en";
	const handleScroll = (0, react.useCallback)(() => {
		if (!scrollContainerRef.current || !hasMore || loading || !onLoadMore) return;
		const container = scrollContainerRef.current;
		const scrollTop = container.scrollTop;
		const scrollHeight = container.scrollHeight;
		const clientHeight = container.clientHeight;
		if (scrollHeight - scrollTop - clientHeight < 100) onLoadMore();
	}, [
		hasMore,
		loading,
		onLoadMore
	]);
	(0, react.useEffect)(() => {
		const container = scrollContainerRef.current;
		if (!container) return;
		container.addEventListener("scroll", handleScroll);
		return () => {
			container.removeEventListener("scroll", handleScroll);
		};
	}, [handleScroll]);
	(0, react.useEffect)(() => {
		if (!loadingRef.current || !hasMore || !onLoadMore) return;
		const observer = new IntersectionObserver((entries) => {
			if (entries[0].isIntersecting && !loading) onLoadMore();
		}, { threshold: .1 });
		observer.observe(loadingRef.current);
		return () => {
			observer.disconnect();
		};
	}, [
		hasMore,
		loading,
		onLoadMore
	]);
	if (sections.length === 0) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-sections-empty" }, /* @__PURE__ */ react.default.createElement(antd.Empty, {
		description: _pisell_utils.locales.getText("registry.sections.empty"),
		image: antd.Empty.PRESENTED_IMAGE_SIMPLE
	}));
	return /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-settings-registry-sections",
		ref: scrollContainerRef,
		style: {
			height: "100%",
			overflowY: "auto",
			paddingRight: "8px"
		}
	}, sections.map((section) => /* @__PURE__ */ react.default.createElement("div", {
		key: section.id,
		onClick: () => onSectionSelect(section.id),
		style: { cursor: "pointer" }
	}, /* @__PURE__ */ react.default.createElement(antd.Card, {
		className: `pisell-settings-registry-section-card ${selectedSectionId === section.id ? "active" : ""}`,
		hoverable: true,
		bodyStyle: { padding: "16px" }
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-icon" }, renderSectionIcon(section.icon, section.code)), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-info" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-name" }, getLocalizedText(section.name, currentLocale)), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-code" }, /* @__PURE__ */ react.default.createElement("span", {
		className: "section-code-tag",
		style: {
			backgroundColor: "#1890ff",
			color: "white",
			padding: "2px 8px",
			borderRadius: "4px",
			fontSize: "12px"
		}
	}, section.code)), section.description && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-settings-registry-section-description" }, getLocalizedText(section.description, currentLocale))))))), hasMore && /* @__PURE__ */ react.default.createElement("div", {
		ref: loadingRef,
		className: "pisell-settings-registry-sections-loading",
		style: {
			textAlign: "center",
			padding: "16px",
			minHeight: "50px"
		}
	}, loading ? /* @__PURE__ */ react.default.createElement(antd.Spin, { size: "small" }) : /* @__PURE__ */ react.default.createElement("div", { style: { color: "#999" } }, _pisell_utils.locales.getText("registry.sections.loadMore"))), !hasMore && sections.length > 0 && /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-settings-registry-sections-no-more",
		style: {
			textAlign: "center",
			padding: "16px",
			color: "#999",
			fontSize: "12px"
		}
	}, _pisell_utils.locales.getText("registry.sections.noMore")));
};
//#endregion
exports.default = SectionList;
