import { SECTION_NAMES } from './../constants/BuilderConstants';
import { CrudAttribute } from './../cruds/CrudAttribute';
// import { LayoutElementEventListener } from './LayoutElementEventListener';

export class Drag {
	private _parentRect!: DOMRect;

	constructor(private _boxWrapper: HTMLElement) {
		_boxWrapper.onmousedown = (e) => this.onMouseDown(e, _boxWrapper);

		this._removePointer(_boxWrapper);
	}

	private _removePointer(boxWrapper: HTMLElement) {
		boxWrapper.onmouseup = async (): Promise<void> => {
			boxWrapper.style.setProperty('pointer-events', 'none');

			let currentSection: string = '';

			await Promise.resolve(
				setTimeout(
					() =>
						Promise.resolve(boxWrapper.style.removeProperty('pointer-events')),
					50
				)
			);

			if (currentSection && boxWrapper.dataset['parent'] === currentSection)
				return;
		};
	}

	onMouseDown(event: MouseEvent, boxWrapper: HTMLElement) {
		event.stopPropagation();

		if (SECTION_NAMES.includes(boxWrapper.dataset['type']!)) return;

		const elementRect = boxWrapper.getBoundingClientRect();

		this._parentRect = boxWrapper.parentElement!.getBoundingClientRect();

		const mousePressX = event.clientX;
		const mousePressY = event.clientY;

		const initL = boxWrapper.style.left;
		const initT = boxWrapper.style.top;

		const preL = Number(initL.replace('px', '')) - mousePressX;
		const preT = Number(initT.replace('px', '')) - mousePressY;

		boxWrapper.style.zIndex = `${Number(boxWrapper.style.zIndex) + 1}`;

		document.body.onmousemove = (e) => {
			e.stopPropagation();

			const left = preL + e.clientX;
			const top = preT + e.clientY;

			if (!((<HTMLElement>boxWrapper.children[0]).contentEditable === 'true'))
				this._repositionElement(boxWrapper, left, top);
		};

		window.onmouseup = async (e: MouseEvent) => {
			e.stopPropagation();

			boxWrapper.style.zIndex = `${Number(boxWrapper.style.zIndex) - 1}`;

			document.body.onmousemove = undefined!;
			window.onmouseup = undefined!;

			console.log('Paso');


			await CrudAttribute.saveAttributes([
				{
					parent: boxWrapper.dataset['_id'],
					type: 'style',
					key: 'top',
					value: boxWrapper.style.top,
					active: true,
				},
				{
					parent: boxWrapper.dataset['_id'],
					type: 'style',
					key: 'left',
					value: boxWrapper.style.left,
					active: true,
				},
			]);
		};
	}

	private _repositionElement(element: HTMLElement, x: number, y: number) {
		element.style.left = `${x}px`;
		element.style.top = `${y}px`;
	}
}