import {TesoftComponent} from "../scripts/main.ts";

export class TesoftInput extends TesoftComponent {
    private readonly input: HTMLInputElement;

    constructor() {
        super();

        const template = document.getElementById("tesoft-input-template") as HTMLTemplateElement;
        const templateContent = template.content;

        const shadowRoot = this.attachShadow({mode: "open"});
        shadowRoot.appendChild(templateContent.cloneNode(true));

        this.input = shadowRoot.querySelector<HTMLInputElement>("input")!;

        this.input.addEventListener("focusin", () => {
            this.setAttribute("focused", "");
        });
        this.input.addEventListener("focusout", () => {
            this.removeAttribute("focused");
        });
    }

    focus() {
        this.input.focus();
    }

    get value(): string {
        return this.input.value;
    }

    set value(value: string) {
        this.input.value = value;
    }
}

customElements.define("tesoft-input", TesoftInput);
