import { ElementAttribute } from '@dilvant/front-lib';
import { getVideoURL } from '../helpers/getVideoURL';
import { IAttributeItem } from '../interfaces/IAttributes';
import { IHTMLElement } from '../interfaces/IHTMLElement';
import {
	DEFAULT_POSITION_WRAPPER_VIDEO,
	DEFAULT_POSITION_WRAPPER,
	DRAGGABLE_ELEMENTS,
	SECTION_NAMES,
} from './../constants/BuilderConstants';
import { WRAPPER_JSON } from './../constants/DragAndResize';
import { ComponentLoaderService } from './../services/component-loader.service';

export class Render {
	static _sectionLoaderSrv: ComponentLoaderService;

	static renderElements(
		elements: IHTMLElement[],
		parentElement: HTMLElement,
		renderWrapper: boolean = false
	): HTMLElement | undefined {
		if (!parentElement) return;

		elements.forEach((element) => {
			const renderElement = Render.renderOneElement(element);

			if (!renderElement) return;

			renderElement.dataset['order'] = element.order;

			const isDraggable = DRAGGABLE_ELEMENTS.includes(element.tag!);

			if (renderWrapper || isDraggable) {
				const wrapper = Render.renderWrapper(element, parentElement);
				renderElement.style.left = '0';
				renderElement.style.top = '0';

				wrapper!.appendChild(renderElement);

				parentElement.appendChild(wrapper!);
			} else {
				parentElement.appendChild(renderElement);
			}
		});

		return parentElement;
	}

	static renderOneElement(
		element: IHTMLElement,
		unsetProperties: boolean = false
	): HTMLElement | undefined {
		if (!element.tag) return;

		const tag: { [tag: string]: string } = {
			img: 'div',
			span: 'p',
		};

		const renderedElement = document.createElement(
			tag[element.tag] ?? element.tag
		);
		const datasetIcon = [{ key: 'iconsave', value: 'true' }];

		if (element.tag === 'i' && element.attributes?.dataset) {
			element.attributes.dataset = [
				...element.attributes.dataset,
				...datasetIcon,
			];
		}

		const stylesAll: IAttributeItem[] = [];
		const keys = ['left', 'top', 'transform', 'z-index'];

		element.attributes!.styles!.forEach((s: any) => {
			if (keys.includes(s.key)) return;
			stylesAll.push(s);
		});

		if (!unsetProperties) {
			if (element.attributes) {
				// TODO: mejorar el codigo
				if (element.tag === 'iframe') {
					const src = element.attributes.properties?.find(
						(property) => property.key === 'src'
					);

					src!.value = getVideoURL(<string>src?.value);
				}

				ElementAttribute.setAll(renderedElement, <any>element.attributes);
			}

			if (element.tag === 'img') {
				const src = element.attributes!.properties!.find(
					(p) => p.key === 'src'
				);
				(<HTMLElement>renderedElement).style.background = `url(${src!.value})`;
				(<HTMLElement>renderedElement).style.backgroundSize = `100% 100%`;
				renderedElement.style.width = '100%';
				renderedElement.style.height = '100%';
				(<HTMLElement>renderedElement).setAttribute('draggable', 'true');
			} else if (element.tag === 'iframe') {
				(<HTMLVideoElement>renderedElement).removeAttribute('loop');
				(<HTMLVideoElement>renderedElement).removeAttribute('controls');
				(<HTMLVideoElement>renderedElement).removeAttribute('autoplay');
				(<HTMLVideoElement>renderedElement).removeAttribute('muted');

				const properties = element.attributes!.properties!.filter(
					(e) => e.value === 'true' || e.value === true
				);

				ElementAttribute.setProperties(renderedElement, <any>properties);
			}

			renderedElement.style.removeProperty('transform');
		}

		if (element?.elements?.length) {
			Render.renderElements(element.elements, renderedElement, false);
		}

		if (element.tag === 'img' || element.tag === 'iframe') {
			renderedElement.setAttribute('draggable', 'false');
		}

		return renderedElement;
	}

	static renderWrapper(element: IHTMLElement, parentElement: HTMLElement) {
		const wrapper = Render.renderOneElement(WRAPPER_JSON, true);

		const { dataset = [] } = element.attributes!;

		const data = dataset.filter((d) => d.key !== 'selectable');


		// TODO: ver si funciona correctamente cuando está comentado
		// if (SECTION_NAMES.includes(parentElement.dataset['type']!)) {
		wrapper!.style.zIndex = '100';

		let styles = element.attributes!.styles!.filter((s) =>
			['left', 'top', 'transform', 'z-index'].includes(s.key!)
		);

		const exitsMovement = styles.find((s) => s.key === 'left');

		if (!exitsMovement) {
			const isVideoElement = element.tag === 'iframe';

			styles = styles.concat(
				isVideoElement
					? DEFAULT_POSITION_WRAPPER_VIDEO
					: DEFAULT_POSITION_WRAPPER
			);
		}

		if (element.tag === 'img') {
			const subStyles = element.attributes!.styles!.filter((s) =>
				['width', 'height'].includes(s.key!)
			);

			styles = styles.concat(subStyles);
		}
		ElementAttribute.setStyles(wrapper!, <any>styles);
		// }
		// TODO: ver si funciona correctamente cuando está comentado

		ElementAttribute.setDataset(wrapper!, <any>[
			...data,
			{ key: 'wrapper', value: true },
		]);

		parentElement.appendChild(wrapper!);

		return wrapper;
	}
}