
class ClickerBox {

	constructor() {
		this.finalX = 0;
		this.finalY = 0;

		this.element = document.getElementById('clickerBox');
		if (!this.element) return;

		this.area = this.element.querySelector('.clicker-box__area');
		this.result = this.element.querySelector('.clicker-box__result');
		this.point = this.element.querySelector('.clicker-box__point');

		this.area.addEventListener('click', (event) => {
			const {width, height} = this.area.getBoundingClientRect();
			const {offsetX, offsetY} = event;

			this.setPoint(offsetX, offsetY)

			this.finalX = Math.round(offsetX / width * 100) / 100;
			this.finalY = Math.round((height - offsetY) / height * 100) / 100;

			console.log(this.finalX, this.finalY);

			this.result.innerHTML = `u = ${this.finalX} | v = ${this.finalY}`;

			this.clickBoxEvent();
		})
	}

	clickBoxEvent() {
		const clickEvent = new Event('clicker');

		dispatchEvent(clickEvent);

	}

	setPoint(x, y) {
		this.point.style.display = 'block';
		this.point.style.top = `${y}px`;
		this.point.style.left = `${x}px`;
	}

	getValue() {
		return {
			u: this.finalX,
			v: this.finalY
		}
	}

}

export default ClickerBox;