import { useComponentBaseConfig } from "../config-provider/context.js";
import { genCssVar } from "../theme/util/genStyleUtils.js";
import isNonNullable_default from "../_util/isNonNullable.js";
import useBorderSize from "./hooks/useBorderSize.js";
import { getBorderBeamGradient } from "./util.js";
import style_default from "./style/index.js";
import { Fragment, Teleport, cloneVNode, computed, createVNode, defineComponent, isVNode, shallowRef } from "vue";
import { clsx } from "@v-c/util";
import { filterEmpty } from "@v-c/util/dist/props-util";
import { unrefElement } from "@vueuse/core";

//#region src/border-beam/BorderBeam.tsx
function getInset(width) {
	return typeof width === "string" ? `calc(-1 * ${width})` : `-${width}px`;
}
const BorderBeam = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
	const { class: contextClassName, style: contextStyle, getPrefixCls, rootPrefixCls } = useComponentBaseConfig("borderBeam", props);
	const prefixCls = computed(() => getPrefixCls("border-beam", props.prefixCls));
	const rootCls = computed(() => rootPrefixCls.value ?? getPrefixCls());
	const [hashId, cssVarCls] = style_default(prefixCls);
	const varName = computed(() => genCssVar(rootCls.value, "border-beam")[0]);
	const hostDom = shallowRef(null);
	const borderInfo = useBorderSize(hostDom);
	const beamGradient = computed(() => getBorderBeamGradient(props.color));
	const insetOffset = computed(() => {
		const { outset } = props;
		if (isNonNullable_default(outset)) return getInset(outset);
		return borderInfo.value.borderWidth.map(getInset).join(" ");
	});
	const setHostDom = (el) => {
		hostDom.value = unrefElement(el) ?? null;
	};
	return () => {
		const children = filterEmpty(slots.default?.() ?? []);
		const beamStyle = {
			...contextStyle?.value ?? {},
			...attrs.style ?? {},
			...beamGradient.value && { [varName.value("beam-gradient")]: beamGradient.value },
			[varName.value("inset-offset")]: insetOffset.value,
			[varName.value("border-radius")]: borderInfo.value.borderRadius
		};
		const beamNode = hostDom.value ? createVNode(Teleport, { "to": hostDom.value }, { default: () => [createVNode("div", {
			"aria-hidden": "true",
			"class": clsx(prefixCls.value, contextClassName?.value, props.rootClass, attrs.class, hashId.value, cssVarCls.value),
			"style": beamStyle
		}, null)] }) : null;
		const renderChild = () => {
			if (children.length !== 1 || !isVNode(children[0])) return children;
			const child = children[0];
			return cloneVNode(child, { ref: setHostDom }, true);
		};
		return createVNode(Fragment, null, [renderChild(), beamNode]);
	};
}, {
	props: {
		prefixCls: {
			type: String,
			required: false
		},
		rootClass: {
			type: String,
			required: false
		},
		color: {
			type: [String, Array],
			required: false
		},
		outset: {
			type: [Number, String],
			required: false
		}
	},
	name: "ABorderBeam",
	inheritAttrs: false
});
var BorderBeam_default = BorderBeam;
BorderBeam.install = (app) => {
	app.component(BorderBeam.name, BorderBeam);
};

//#endregion
export { BorderBeam_default as default };