import { listen, SaveData } from "rkgk/framework.js";

export class ResizeHandle extends HTMLElement {
    saveData = new SaveData("resizeHandle");

    connectedCallback() {
        this.direction = this.getAttribute("data-direction");
        this.targetId = this.getAttribute("data-target");
        this.target = document.getElementById(this.targetId);
        this.targetProperty = this.getAttribute("data-target-property");
        this.initSize = parseInt(this.getAttribute("data-init-size"));
        this.minSize = parseInt(this.getAttribute("data-min-size"));

        this.saveData.elementId = this.targetId;

        // NOTE(localStorage): Migration from old local storage key.
        let oldSizeKey = `rkgk.resizeHandle.size.${this.targetId}`;
        this.#setSize(
            this.saveData.get("size") ?? localStorage.getItem(oldSizeKey) ?? this.initSize,
        );
        this.#saveSize();
        this.#updateTargetProperty();

        this.visual = this.appendChild(document.createElement("div"));
        this.visual.classList.add("visual");

        this.#draggingBehaviour();

        // NOTE(localStorage): Migration from old local storage key.
        localStorage.removeItem(oldSizeKey);
    }

    #setSize(newSize) {
        if (newSize != newSize) {
            newSize = this.initSize;
        }
        this.size = Math.max(this.minSize, newSize);
    }

    #saveSize() {
        this.saveData.set("size", this.size);
    }

    #updateTargetProperty() {
        this.target.style.setProperty(this.targetProperty, `${this.size}px`);
    }

    async #draggingBehaviour() {
        while (true) {
            let mouseDown = await listen([this, "mousedown"]);
            let startingSize = this.size;
            if (mouseDown.button == 0) {
                mouseDown.preventDefault();
                this.classList.add("dragging");

                while (true) {
                    let event = await listen([window, "mousemove"], [window, "mouseup"]);
                    if (event.type == "mousemove") {
                        let delta =
                            this.direction == "vertical"
                                ? mouseDown.clientX - event.clientX
                                : event.clientY - mouseDown.clientY;
                        this.#setSize(startingSize + delta);
                        this.#updateTargetProperty();
                    } else if (event.type == "mouseup") {
                        this.classList.remove("dragging");
                        this.#saveSize();
                        break;
                    }
                }
            }
        }
    }
}

customElements.define("rkgk-resize-handle", ResizeHandle);