// Javascript logic for managing the Text Size Toggle component.  
class FSTextSizeToggle {

    // === Inner Member Variables === //

    // The names of CSS variables.
    #sizeVar = "--body-text-size";
    #mdSizeVar = "--body-text-size-normal";
    #lgSizeVar = "--body-text-size-large";
    #xlSizeVar = "--body-text-size-larger";

    // The Values of the different text sizes.
    #mdSize = undefined;
    #lgSize = undefined;
    #xlSize = undefined;

    // Pointer to the document's root for getting/setting CSS variables.
    #rootElement = document.querySelector(':root');

    // Pointer to the toggle element.
    #toggleElement = document.querySelector("#fsTextSizeToggle")

    // Array of toggle buttons
    #toggleButtons = undefined;

    // Constructor - Calls the inner function getSizes().
    constructor() {
        if (this.#toggleElement != null) {
            this.#toggleButtons = Array.from(this.#toggleElement.children);
            this.#getSizes();
            this.applyCookie();
        }
    }

    // Gets the declared value from the CSS for the CSS variable name provided.
    #getSize(varName) {
        return getComputedStyle(this.#rootElement).getPropertyValue(varName);
    }

    // Gets the values of the three different sizes and stores them in the inner members.
    #getSizes() {
        this.#mdSize = this.#getSize(this.#mdSizeVar);
        this.#lgSize = this.#getSize(this.#lgSizeVar);
        this.#xlSize = this.#getSize(this.#xlSizeVar);
    }

    // Sets the current size.
    #setSize(size) {
        this.#rootElement.style.setProperty(this.#sizeVar, size);
    }

    #setCurrentToggleButton(id) {
        this.#toggleButtons.forEach(element => {
            if (element.id === id) {
                element.classList.add("current");
            } else {
                element.classList.remove("current");
            }
        });
    }

    // Sets the current size to the normal value.
    setNormal() {
        this.#setSize(this.#mdSize);
        this.#setCurrentToggleButton("fsTextSizeToggleNormal");
        this.setCookie("normal");
    }

    // Sets the current size to the large value.
    setLarge() {
        this.#setSize(this.#lgSize);
        this.#setCurrentToggleButton("fsTextSizeToggleLarge");
        this.setCookie("large");
    }

    // Sets the current size to the larger value.
    setLarger() {
        this.#setSize(this.#xlSize);
        this.#setCurrentToggleButton("fsTextSizeToggleLarger");
        this.setCookie("larger");
    }

    keydownNormal(e) {
        if (e.keyCode == 32) {
            e.preventDefault();
            this.setNormal();
        }
    }

    keydownLarge(e) {
        if (e.keyCode == 32) {
            e.preventDefault();
            this.setLarge();
        }
    }

    keydownLarger(e) {
        if (e.keyCode == 32) {
            e.preventDefault();
            this.setLarger();
        }
    }

    // === Cookie Management === //

    setCookie(value) {
        document.cookie = `textsize = ${value}; path=/`;
    }

    getCookie() {
        let match = document.cookie.match(new RegExp('(^| )' + 'textsize' + '=([^;]+)'));
        let r = "normal";
        if (match) {
            r = match[2];
        }
        return r;
    }

    applyCookie() {
        let value = this.getCookie();
        switch (value) {
            case "large":
                this.setLarge();
                break;
            case "larger":
                this.setLarger();
                break;
            default:
                this.setNormal();
                break;
        }
    }

}

// Instantiates the class for use.
let fsTextSizeToggle = new FSTextSizeToggle();