import { Directive } from "vue";

export default {
	mounted(src, binding, vn) {
		const getBgColor = (el: HTMLElement) => {
			const style = window.getComputedStyle(el);
			if (
				style.backgroundColor &&
				!["rgba(0, 0, 0, 0)", "rgba(0,0,0,0)", "transparent"].includes(
					style.backgroundColor,
				)
			) {
				return style.backgroundColor;
			} else {
				return el.parentElement ? getBgColor(el.parentElement) : "transparent";
			}
		};

		const parentBg = getBgColor(src.parentElement);

		const myBg = getComputedStyle(document.documentElement).getPropertyValue(
			"--panel",
		);

		if (parentBg === myBg) {
			src.style.backgroundColor = "var(--bg)";
		} else {
			src.style.backgroundColor = "var(--panel)";
		}
	},
} as Directive;