import { IAttributeItem } from '@dilvant/front-lib/dist/interfaces/IAttributeItem';
import { IWallpaper } from '../interfaces/IPage';

export class Common {
	// get cords
	static getAbsoluteCords(el: HTMLElement): DOMRect | undefined {
		if (!el) return;

		return el.getBoundingClientRect();
	}

	static addListenerWithArgsToElement(
		element: HTMLElement,
		event: string,
		func: any,
		vars: any
	) {
		const jumpingFunction = (function (ff, vv) {
			return function () {
				ff(vv);
			};
		})(func, vars);

		element.addEventListener(event, jumpingFunction);

		return jumpingFunction;
	}

	static cssToSafeCss(styles: IAttributeItem[] = []) {
		return styles.map((s) => {
			return { key: `-webkit-${s.key}`, value: s.value };
		});
	}

	static fromIAttributeItemToKeyValueString(attr: IAttributeItem[] = []) {
		if (!Array.isArray(attr)) return '';

		let list = attr
			.map((s) => {
				if (!s.key) return;

				return `${s.key}:${s.value}}`;
			})
			.filter((s) => s);

		return list.join(';');
	}

	static setAbsoluteCordsToElement(
		element: HTMLElement,
		relativeParent: HTMLElement,
		target: HTMLElement,
		correction?: {
			top?: number;
			left?: number;
			minLeft?: number;
			minTop?: number;
			safeTop?: number;
			safeLeft?: number;
		}
	) {
		if (!correction) return;

		const elementCords = Common.getAbsoluteCords(element);
		const parentCords = Common.getAbsoluteCords(relativeParent);

		correction.top = correction.top === undefined ? 0 : correction.top;
		correction.left = correction.left === undefined ? 0 : correction.left;

		const difLeft = elementCords!.left - parentCords!.left;
		const difTop = elementCords!.top - parentCords!.top;

		let top = difTop + correction.top;

		if (correction.minTop !== undefined && top < correction.minTop)
			top = correction.safeTop!;

		let left = difLeft + correction.left;

		if (correction.minLeft !== undefined && left < correction.minLeft)
			left = correction.safeLeft!;

		const validLeft = left + target.offsetWidth;

		if (validLeft > parentCords!.width)
			left = left - (validLeft - parentCords!.width);

		if (relativeParent.scrollTop > 0) {
			top = top + relativeParent.scrollTop;
		}

		if (
			target.id === 'dvb-quick-sidebar-options' ||
			target.id === 'dvb-add-blank-section__container'
		) {
			const toggle = document.querySelector('.toggle-sidemenu');

			target.style.opacity = '1';
			target.style.display = `block`;

			top = difTop;

			if (toggle) {
				if (top < 350) target.style.opacity = `${top * 0.01 - 1.5}`;
			} else {
				if (top < 350) target.style.opacity = `${top * 0.01 - 0.5}`;
			}

			if (top > parentCords!.height) target.style.display = `none`;
		}
		if (target.id === 'dvb-quick-sidebar-options') {
			left = correction.safeLeft!;
		}

		if (target.id === 'dvb-add-blank-bottom-section__container') {
			top = difTop + elementCords!.height - 40;
			if (difTop < 350) target.style.opacity = `${top * 0.01 - 1.5}`;
		}

		if (
			(target.id === 'dvb-add-blank-section__container' ||
				target.id === 'dvb-add-blank-bottom-section__container') &&
			elementCords!.width > 819
		) {
			left = elementCords!.width - 45;
		}

		target.style.top = `${top}px`;

		target.style.left = `${left}px`;
	}

	public resetTheStylesOfElement(element: HTMLElement | Element) {
		if (!element) return;

		new Promise((res, req) => {
			return res(element.setAttribute('style', ''));
		});
	}

	static mergeStylesWithPropetyValues(
		styles: any[],
		forMergeStyles: any[],
		propertyName?: string,
		propertyValue?: string
	) {
		if (!styles) return;

		if (propertyValue && propertyName)
			return [
				...styles,
				...forMergeStyles,
				...[{ key: propertyName, value: propertyValue }],
			];
		else return [...styles, ...forMergeStyles];
	}

	static mergeWithTheCorrectBackgroundValue(
		styles: any[],
		wallpaper: IWallpaper
	) {
		let value: any[] = [];
		const { type } = wallpaper;
		if (type === 'style') value = wallpaper.attributes.styles!;
		else if (type === 'asset')
			value = [
				{
					key: 'background-image',
					value: `url('${wallpaper.asset.value}')`,
				},
			];

		return [...styles, ...value];
	}

	static saveFontLink(linkUsefull: string) {
		let fontsLink = <HTMLLinkElement>document.getElementById('FONT_UTILS');

		if (fontsLink) {
			fontsLink.href = linkUsefull;
		} else {
			let s = document.createElement('link');
			s.id = 'FONT_UTILS';
			s.href = linkUsefull;
			s.rel = 'stylesheet';

			document.head.appendChild(s);
		}
	}
}