import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators/custom-element.js";
import { property } from "lit/decorators/property.js";
import { styleMap } from "lit/directives/style-map.js";
import { ref, createRef, Ref } from "lit/directives/ref.js";

@customElement("fridge-tile")
export class FridgeTile extends LitElement {
    @property({ type: String })
    word = "";

    handle: Ref<HTMLDivElement> = createRef();

    static get styles() {
        return css`
            :host {
                display: block;
            }

            :host([data-dragging="idle"]) {
                cursor: grab;
            }

            :host([data-dragging="dragging"]) {
                cursor: grabbing;
            }

            .word {
                font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
                box-shadow: 0 0 0.375rem 0.125rem #aaa;
                text-align: center;
                border-radius: 10%;
                user-select: none;
                cursor: pointer;
                color: #444;
                font-size: 0.9375rem;
                padding: 0.1875rem 0.25rem 0.25rem 0.25rem;
                position: relative;
                background: white;
                z-index: 100;
            }
        `;
    }

    get position() {
        const { left, top } = this.getBoundingClientRect();
        return [left, top];
    }

    get relativePosition() {
        return [this.offsetLeft, this.offsetTop];
    }

    get size() {
        const { width, height } = this.getBoundingClientRect();
        return { width, height };
    }

    get tl() {
        return this.relativePosition;
    }

    get tr() {
        const [x, y] = this.relativePosition;
        const { width } = this.size;
        return [x + width, y];
    }

    get bl() {
        const [x, y] = this.relativePosition;
        const { height } = this.size;
        return [x + height, y];
    }

    get br() {
        const [x, y] = this.relativePosition;
        const { width, height } = this.size;
        return [x + width, y + height];
    }

    get points() {
        return [this.tl, this.tr, this.bl, this.br];
    }

    render() {
        const styles = {
            width: `${this.word.length * 1.2}ch`,
        };
        return html`<div part="word ${ref(this.handle)} " style="${styleMap(styles)}" class="word">${this.word}</div>`;
    }
}