import { shallowRef, watch } from "vue";

//#region src/border-beam/hooks/useBorderSize.ts
const DEFAULT_BORDER_INFO = {
	borderWidth: [
		0,
		0,
		0,
		0
	],
	borderRadius: "0px"
};
function parseBorderWidth(value) {
	const size = Number.parseFloat(value);
	return Number.isFinite(size) ? size : 0;
}
function useBorderSize(domNode) {
	const borderInfo = shallowRef(DEFAULT_BORDER_INFO);
	watch(domNode, (node) => {
		if (!node) {
			borderInfo.value = DEFAULT_BORDER_INFO;
			return;
		}
		const { borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius } = getComputedStyle(node);
		borderInfo.value = {
			borderWidth: [
				parseBorderWidth(borderTopWidth),
				parseBorderWidth(borderRightWidth),
				parseBorderWidth(borderBottomWidth),
				parseBorderWidth(borderLeftWidth)
			],
			borderRadius
		};
	}, {
		immediate: true,
		flush: "post"
	});
	return borderInfo;
}

//#endregion
export { useBorderSize as default };