class TextEditable extends HTMLElement {
    // Your element is being constructed. It is not connected to the page yet!
    // It will also be called when you use `document.createElement`
    constructor() {
        // you must call super(). The browser will remind you if you don't ;-)
        super();
        // We prepare the shadow dom so that all the inner elements are private
        // and don't interfere with the page
        this.shadow = this.attachShadow({ mode: "open" });
    }

    connectedCallback() {
        // populate our shadow dom with our style and html
        this.shadow.innerHTML = `
            <style>${this.getStyle()}</style>
            ${this.getHtml()}
        `;
        // keep a reference of the main elements in the html
        this.span = this.shadow.querySelector("span");
        this.input = this.shadow.querySelector("input");
        this.div = this.shadow.querySelector("div");

        // Add listeners to the different elements
        this.span.addEventListener(
            "click",
            (this.onTextClickedListener = this.onTextClicked.bind(this))
        );
        this.input.addEventListener(
            "blur",
            (this.onInputBlurListener = this.onInputBlur.bind(this))
        );
        this.input.addEventListener(
            "keyup",
            (this.onKeyPressListener = this.onKeyPress.bind(this))
        );
    }

    onTextClicked() {
        // copy the text to the input element
        this.input.value = this.textContent;
        // show the input field
        this.switchMode("edit");
    }

    onInputBlur() {
        // just restore the normal text without changing it
        this.switchMode("normal");
    }

    onKeyPress(e) {
        if (e.code === "Enter") {
            this.commitValue();
        } else if (e.code === "Escape") {
            this.switchMode("normal");
        }
    }

    // Save the value from the field
    commitValue() {
        // copy the text from the input field to the element itself
        this.textContent = this.input.value;
        // dispatch an event to let the outside world we updated the text
        this.dispatchEvent(new CustomEvent("update"));
        // show the normal text
        this.switchMode("normal");
    }

    // Show the input field or the static text according to the passed parameter
    switchMode(mode) {
        if (mode === "edit") {
            this.span.style.display = "none";
            this.div.style.display = "inline-block";
            this.input.focus();
        } else {
            this.span.style.display = "inline-block";
            this.div.style.display = "none";
        }
    }

    // Return the HTML to populate our component. Note the usage of the `<slot>`
    // tag: it references the child nodes of our web components
    getHtml() {
        return `
            <span>
                <slot></slot>
            </span>
            <div>
                <input class="field"/>
            </div>
        `;
    }

    // Returns the style to use inside the shadow DOM. These rules will only affect
    // the elements inside the shadow DOM!
    getStyle() {
        return `
            :host {
                cursor: pointer;
            }
            div {
                display: none;
            }
        `;
    }

    // Nicely cleanup the event listeners when the node get disconnected
    disconnectedCallback() {
        this.span.removeEventListener("click", this.onTextClickedListener);
        this.input.removeEventListener("blur", this.onInputBlurListener);
        this.input.removeEventListener("keyup", this.onKeyPressListener);
    }
}
// Declare our new web component
customElements.define("text-editable", TextEditable);