import useEngineContext from "../../../../../hooks/useEngineContext.js";
import locales_default from "./locales.js";
import React, { useEffect } from "react";
import { locales } from "@pisell/utils";
import { Button, PisellGoodPassCard, PisellInput, PisellText } from "@pisell/materials";
import classNames from "classnames";
import ChevronDown from "@pisell/icon/es/ChevronDown";
import UserCircle from "@pisell/icon/es/UserCircle";
import "./index.less";
//#region src/components/eventBooking/components/Voucher/components/Voucher.tsx
const VoucherUI = ({ showDetail, onToggleDetail, isLogin, onLoginClick, availableData, onDiscountChange, mixedSort, code, onCodeChange, onApplyCode, codeDisabled = false }) => {
	var _context$appHelper;
	const utils = ((_context$appHelper = useEngineContext().appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	useEffect(() => {
		var _utils$storage;
		const locale = (utils === null || utils === void 0 || (_utils$storage = utils.storage) === null || _utils$storage === void 0 ? void 0 : _utils$storage.get("umi_locale")) || "en";
		locales.init(locales_default, locale);
	}, [utils]);
	const renderLoginCard = () => {
		if (isLogin) return null;
		return /* @__PURE__ */ React.createElement("div", { className: "login-card" }, /* @__PURE__ */ React.createElement(UserCircle, { style: { fontSize: 28 } }), /* @__PURE__ */ React.createElement("div", { className: "text-wrapper" }, /* @__PURE__ */ React.createElement(PisellText, {
			className: "login-btn",
			onClick: onLoginClick
		}, locales.getText("pisell2.voucher.login")), /* @__PURE__ */ React.createElement("span", null, " ", locales.getText("pisell2.voucher.login-tip"))));
	};
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__event-booking-voucher-container" }, /* @__PURE__ */ React.createElement("div", { className: "voucher-title" }, /* @__PURE__ */ React.createElement("span", { className: "voucher-title-left" }, locales.getText("pisell2.voucher.title")), /* @__PURE__ */ React.createElement("span", {
		className: "voucher-title-right",
		onClick: onToggleDetail
	}, locales.getText("pisell2.voucher.details"), " ", /* @__PURE__ */ React.createElement(ChevronDown, { className: classNames("voucher-right-icon", { show: showDetail }) }))), /* @__PURE__ */ React.createElement("div", { className: classNames("voucher-detail", { show: showDetail }) }, (availableData === null || availableData === void 0 ? void 0 : availableData.length) > 0 ? /* @__PURE__ */ React.createElement(PisellGoodPassCard, {
		style: { width: "100%" },
		dataSource: availableData,
		mixedSort,
		onChange: onDiscountChange
	}) : null, renderLoginCard(), /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "voucher-code-input" }, /* @__PURE__ */ React.createElement("div", { style: { whiteSpace: "nowrap" } }, locales.getText("pisell2.voucher.code"), ":"), /* @__PURE__ */ React.createElement(PisellInput, {
		value: code,
		allowClear: true,
		onChange: (e) => {
			var _e$target;
			onCodeChange((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
		},
		size: "small",
		placeholder: locales.getText("pisell2.voucher.enter-code")
	})), /* @__PURE__ */ React.createElement(Button, {
		size: "small",
		disabled: codeDisabled,
		onClick: () => onApplyCode()
	}, locales.getText("pisell2.voucher.apply")))));
};
//#endregion
export { VoucherUI as default };
