import Widget from "./Widget.js";
import BrushMode from "../BrushMode.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
import ButtonBackgroundTile from "../ButtonBackgroundTile.js";
import Tileset from "../Tileset.js";

export default class BackgroundPickerWidget extends Widget
{
    constructor(tileset, brush)
    {
        super('Hintergrund');
        this.tileset = tileset;
        this.brush = brush;
        this.htmlElement = this.createElementPicker();
        this.htmlElementSelector = this.createElementSelector();
        this.htmlElement.appendChild(this.htmlElementSelector);

        this.loadTileset();

        window.addEventListener(
            TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
            (event) => {
                if (this.isActive) {
                    this.setTile(event.button.index);
                    this.brush.mode = BrushMode.BACKGROUND;
                }
            }
        );
    }

    loadTileset()
    {
        if (this.tileset.background === null) {
            this.disable();
            this.htmlElement.style.backgroundImage = 'none';
            return;
        }

        this.enable();

        for (let t = -2; t >= -this.tileset.background.tiles - 1; t--) {
            console.log(t);
            const button = new ButtonBackgroundTile(this.tileset, t);
            this.htmlElementSelector.appendChild(button.getElement());
        }

        this.htmlElement.style.backgroundImage = 'url("' + this.tileset.background.image.src + '")';
        this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
    }

    /**
     * @param {Tileset} tileset 
     */
    reloadTileset(tileset)
    {
        this.tileset = tileset;
        this.htmlElementSelector.innerHTML = '';
        this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
        this.loadTileset();
    }

    createElementPicker()
    {
        const htmlElement = document.createElement('div');
        htmlElement.id = 'tileset-picker';
        htmlElement.style.width = this.tileset.getTileWidth() + 'px';
        htmlElement.style.height = this.tileset.getTileHeight() + 'px';
        htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';

        return htmlElement;
    }

    createElementSelector()
    {
        const htmlElementSelector = document.createElement('div');
        htmlElementSelector.id = 'tileset-selector-widget';
        htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
        htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';

        return htmlElementSelector;
    }

    setTile(index)
    {
        this.htmlElement.style.backgroundPosition = String(((index + 2) % this.tileset.background.tiles) * this.tileset.getTileWidth()) + 'px ' + String(this.tileset.getTileHeight()) + 'px';
    }

    getElement()
    {
        return this.htmlElement;
    }

    updateExtendedTileVisibility()
    {
        const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles);

        for (const index of this.htmlElementSelector.childNodes.keys()) {
            if (index >= firstExtendedTileIndex) {
                this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent
                    ? 'none'
                    : 'inline-flex';
            }
        }
    }
}