import React, { useEffect, useState } from "react";
import { Select } from "antd";
import { locales } from "@pisell/utils";
import "./index.less";
//#region src/components/ruleSetting/ruleBorder/index.tsx
const RuleBorder = (props) => {
	const { startDomClassName, endDomClassName, value, onChange } = props;
	const [typePosition, setTypePosition] = useState({
		top: "0px",
		bottom: "0px"
	});
	const includeOption = [{
		label: locales.getText("pisell2.text.and"),
		value: "and"
	}, {
		label: locales.getText("pisell2.text.or"),
		value: "or"
	}];
	const getTypePosition = (startDomClassName, endDomClassName) => {
		let startDom = document.querySelector(`.${startDomClassName}`);
		let endDom = document.querySelector(`.${endDomClassName}`);
		let startDomRect = startDom === null || startDom === void 0 ? void 0 : startDom.getBoundingClientRect();
		let endDomRect = endDom === null || endDom === void 0 ? void 0 : endDom.getBoundingClientRect();
		if (startDomRect && endDomRect) {
			let startDomHeight = startDomRect.height;
			let endDomHeight = endDomRect.height;
			return {
				top: startDomHeight / 2 + "px",
				bottom: endDomHeight / 2 + "px"
			};
		}
		return {
			top: "0px",
			bottom: "0px"
		};
	};
	useEffect(() => {
		setTypePosition(getTypePosition(startDomClassName, endDomClassName));
	}, [startDomClassName, endDomClassName]);
	return /* @__PURE__ */ React.createElement("div", { className: "rule-setting-type" }, /* @__PURE__ */ React.createElement("div", {
		className: "border",
		style: typePosition
	}, /* @__PURE__ */ React.createElement(Select, {
		className: "rule-setting-type-select",
		options: includeOption,
		size: "large",
		value,
		onChange: (type) => {
			onChange(type);
		}
	})));
};
//#endregion
export { RuleBorder as default };
