import useComponents from "../../../../hooks/useComponents.js";
import React, { useRef } from "react";
import { Button } from "antd";
import { locales } from "@pisell/utils";
import "./index.less";
//#region src/plus/walletEditor/components/relationProduct/index.tsx
const RelationProduct = ({ value, onChange }) => {
	const linkerRef = useRef(null);
	const [RelationProduct] = useComponents({ components: ["RelationProduct"] });
	if (!(RelationProduct === null || RelationProduct === void 0 ? void 0 : RelationProduct.PassLinker)) return null;
	const onShow = () => {
		if (linkerRef.current) {
			var _linkerRef$current$op, _linkerRef$current;
			(_linkerRef$current$op = (_linkerRef$current = linkerRef.current).openModal) === null || _linkerRef$current$op === void 0 || _linkerRef$current$op.call(_linkerRef$current);
		}
	};
	return /* @__PURE__ */ React.createElement("div", { className: "product-detail-card-module" }, /* @__PURE__ */ React.createElement("div", { className: "linked-passes-empty-state" }, /* @__PURE__ */ React.createElement("p", { className: "linked-passes-description" }, locales.getText("linkedPassesDesc")), /* @__PURE__ */ React.createElement(Button, {
		type: "primary",
		size: "large",
		onClick: onShow,
		className: "select-passes-button"
	}, locales.getText("selectPasses")), value && value.length > 0 ? /* @__PURE__ */ React.createElement("div", { style: { padding: 8 } }) : null, /* @__PURE__ */ React.createElement(RelationProduct.PassLinker, {
		ref: linkerRef,
		value,
		onChange
	})));
};
//#endregion
export { RelationProduct as default };
