import TilorswiftFieldClickedEvent from "./events/TilorswiftFieldClickedEvent.js";
import TilorswiftFieldEnteredEvent from "./events/TilorswiftFieldEnteredEvent.js";

export default class Field
{
    /**
     * @param {Tileset} tileset
     * @param {number} x
     * @param {number} y
     * @param {number} index
     */
    constructor(tileset, x = 0, y = 0, index = -1)
    {
        this.tileset = tileset;
        this.index = index;
        this.x = x;
        this.y = y;
        this.isEntrancePoint = false;
        this.isTargetPoint = false;
        this.entrancePoint = null;
        this.targetPoint = null;

        this.initHtml();
        this.initEventListeners();
    }

    initEventListeners()
    {
        this.htmlElement.addEventListener(
            'mousedown', (event) => {
                window.dispatchEvent(new TilorswiftFieldClickedEvent(this, event.button));
            }
        );

        this.htmlElement.addEventListener(
            'contextmenu', (event) => {
                window.dispatchEvent(new TilorswiftFieldClickedEvent(this), event.button);
            }
        );

        this.htmlElement.addEventListener(
            'mouseenter', () => {
                window.dispatchEvent(new TilorswiftFieldEnteredEvent(this));
            }
        );
    }

    initHtml()
    {
        this.htmlElement = document.createElement('td');
        this.className = 'field';
        this.setupElement();
        this.addSelector();
    }

    setupElement()
    {
        this.htmlElement.classList.add(this.className);
        this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px';
        this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px';
        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileHeight() + 'px';

        this._setupBackgroundImage();
        this._setupBackgroundPosition();
    }

    _setupBackgroundImage()
    {
        const url = this.index >= -1
            ? this.tileset.image.src
            : this.tileset.background.image.src;

        this.htmlElement.style.backgroundImage = 'url("' + url + '")';
    }

    _setupBackgroundPosition()
    {
        const position = this.index >= -1
            ? -this.index * this.tileset.getTileWidth()
            : ((this.index + 2) % this.tileset.background.tiles) * this.tileset.getTileWidth();

        this.htmlElement.style.backgroundPositionX = String(position) + 'px';
    }

    addSelector()
    {
        let hoverElement = document.createElement('div');
        hoverElement.classList.add('selection');

        this.htmlElement.appendChild(hoverElement);
    }

    setIndex(index)
    {
        this.index = index;
        this._setupBackgroundPosition();
        this._setupBackgroundImage();
    }

    setEntrancePoint(bool)
    {
        this.isEntrancePoint = bool;

        if (this.isEntrancePoint) {
            this.entrancePoint = document.createElement('div');
            this.entrancePoint.classList.add('entrance');

            this.htmlElement.appendChild(this.entrancePoint);
        } else {
            if (this.entrancePoint instanceof HTMLElement) {
                this.entrancePoint.remove();
                this.entrancePoint = null;
            }
        }
    }

    setTargetPoint(bool)
    {
        this.isTargetPoint = bool;

        if (this.isTargetPoint) {
            this.targetPoint = document.createElement('div');
            this.targetPoint.classList.add('target');

            this.htmlElement.appendChild(this.targetPoint);
        } else {
            if (this.targetPoint instanceof HTMLElement) {
                this.targetPoint.remove();
                this.targetPoint = null;
            }
        }
    }

    getElement()
    {
        return this.htmlElement;
    }
}