import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators/custom-element.js";
import { words } from "./wordlist.js";
import { PointerLocationRequest } from "./events.js";

import "./fridge-board.js";

@customElement("fridge-magnets")
export class FridgeMagnets extends LitElement {
    static get styles() {
        return css`
            :host {
                display: block;
            }

            fridge-board {
                display: block;
                position: relative;
                width: 100%;
                height: 95vh;
                background: url("./dist/pingbg.png") repeat;
            }
        `;
    }

    words = words;

    pointerLocation: { x: number; y: number } = { x: -1, y: -1 };

    constructor() {
        super();
        this.updatePointerPosition = this.updatePointerPosition.bind(this);
        this.onPointerLocation = this.onPointerLocation.bind(this);
    }

    updatePointerPosition(ev: PointerEvent) {
        this.pointerLocation = { x: ev.clientX, y: ev.clientY };
    }

    onPointerLocation(ev: PointerLocationRequest) {
        ev.position = this.pointerLocation;
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener("pointermove", this.updatePointerPosition);
        window.addEventListener(PointerLocationRequest.eventName, this.onPointerLocation);
    }

    disconnectedCallback() {
        window.removeEventListener("pointermove", this.updatePointerPosition);
        window.removeEventListener(PointerLocationRequest.eventName, this.onPointerLocation);
        super.disconnectedCallback();
    }

    render() {
        return html`<div id="body">
        <fridge-board .words=${this.words} id="fridge"></fridge-broad>
            <p slot="footer">Some Content will go here.</p>
        </div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        "fridge-magnets": FridgeMagnets;
    }
}
