import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import BrandPanel from "./components/BrandPanel/index.js";
import LoginPanel from "./components/LoginPanel/index.js";
import SelectDevice from "./components/SelectDevice/index.js";
import SelectStore from "./components/SelectStore/index.js";
import UserFooter from "./components/UserFooter/index.js";
import locales_default from "./locales.js";
import appDevicePlanning_default from "../saasDevice/appDevicePlanning/index.js";
import React, { memo, useMemo } from "react";
import { locales } from "@pisell/utils";
import "./WebPosLoginCpt.less";
//#region src/plus/webPosLogin/WebPosLoginCpt.tsx
/** 默认背景图片 */
const DEFAULT_BACKGROUND = "http://static.pisellcdn.com/defaultBg1.jpg";
/**
* WebPosLoginCpt 主组件
* @description WebPOS 登录流程组件，包含登录、店铺选择、设备选择三个步骤
*/
const WebPosLoginCpt = memo((props) => {
	var _context$appHelper;
	const { className = "", style, loginConfig, backgroundImage, brandConfig, step = "login", showBackButton = true, storeList = [], deviceList = [], userInfo, selectedStore, lastUsedStoreId, lastUsedDeviceId, locale = "en", loading = false, onStoreSelect, onDeviceSelect, onChangeAccount, onChangeStore, onBack, onLoginSuccess, onIotDeviceLinked, loginSlot, variant, onIotBack } = props;
	const isMobile = variant === "phone" || variant === "mobile";
	const context = useEngineContext();
	const { isIotLogin = false, iotKind } = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.constants) || {};
	console.log(props, onLoginSuccess, "onLoginSuccess");
	locales.init(locales_default, locale);
	/**
	* 获取当前步骤的标题
	*/
	const stepTitle = useMemo(() => {
		return {
			login: "",
			store: locales.getText("webpos-login-select-store-title"),
			device: locales.getText("webpos-login-select-device-title")
		}[step];
	}, [step, locale]);
	/**
	* 是否显示返回按钮
	* login 步骤默认不显示，其他步骤根据 showBackButton 配置
	*/
	const shouldShowBackButton = useMemo(() => {
		if (step === "login") return false;
		return showBackButton;
	}, [step, showBackButton]);
	/**
	* 渲染右侧交互区内容
	*/
	const renderRightContent = () => {
		switch (step) {
			case "login": return /* @__PURE__ */ React.createElement(LoginPanel, {
				onLoginSuccess,
				config: loginConfig
			});
			case "store": return /* @__PURE__ */ React.createElement(SelectStore, {
				storeList,
				locale,
				loading,
				lastUsedStoreId,
				onSelect: onStoreSelect
			});
			case "device": return /* @__PURE__ */ React.createElement(SelectDevice, {
				deviceList,
				locale,
				loading,
				lastUsedDeviceId,
				onSelect: onDeviceSelect
			});
			default: return null;
		}
	};
	/**
	* 渲染底部用户信息
	*/
	const renderFooter = () => {
		if (step === "login") return null;
		return /* @__PURE__ */ React.createElement(UserFooter, {
			isShowChangeStore: storeList.length > 1,
			userInfo,
			selectedStore,
			step,
			locale,
			onChangeAccount,
			onChangeStore
		});
	};
	console.log("xxxx=>>>>", isIotLogin, step);
	return isIotLogin && step === "device" ? /* @__PURE__ */ React.createElement("div", { className: "webpos-login__iot-device" }, /* @__PURE__ */ React.createElement(appDevicePlanning_default, {
		kind: iotKind,
		onLinked: onIotDeviceLinked,
		showBack: true,
		onBack: onIotBack
	})) : /* @__PURE__ */ React.createElement("div", {
		className: `webpos-login ${isMobile ? "webpos-login--mobile" : ""} ${className}`.trim(),
		style: _objectSpread2(_objectSpread2({}, style), {}, { backgroundImage: `url(${backgroundImage || DEFAULT_BACKGROUND})` })
	}, /* @__PURE__ */ React.createElement("div", { className: "webpos-login__backdrop" }), /* @__PURE__ */ React.createElement("div", { className: "webpos-login__card" }, /* @__PURE__ */ React.createElement(BrandPanel, { config: brandConfig }), /* @__PURE__ */ React.createElement("div", { className: "webpos-login__right-panel" }, step === "login" ? loginSlot ? loginSlot : null : /* @__PURE__ */ React.createElement("div", { className: "webpos-login__header" }, shouldShowBackButton && /* @__PURE__ */ React.createElement("button", {
		className: "webpos-login__back-btn",
		onClick: onBack,
		type: "button",
		"aria-label": locales.getText("webpos-login-back")
	}, /* @__PURE__ */ React.createElement("svg", {
		width: "24",
		height: "24",
		viewBox: "0 0 24 24",
		fill: "none",
		xmlns: "http://www.w3.org/2000/svg"
	}, /* @__PURE__ */ React.createElement("path", {
		d: "M15 18L9 12L15 6",
		stroke: "currentColor",
		strokeWidth: "2",
		strokeLinecap: "round",
		strokeLinejoin: "round"
	}))), stepTitle && /* @__PURE__ */ React.createElement("h1", { className: "webpos-login__title" }, stepTitle)), /* @__PURE__ */ React.createElement("div", { className: "webpos-login__content" }, renderRightContent()), /* @__PURE__ */ React.createElement("div", { className: "webpos-login__footer" }, renderFooter()))));
});
WebPosLoginCpt.displayName = "WebPosLoginCpt";
//#endregion
export { WebPosLoginCpt as default };
