/* ==========================================================
   AXISPRO
   OBSERVATORY ENGINE
========================================================== */

class ObservatoryEngine {

    constructor() {

        this.questions = [

            {
                q:"¿Qué ocurre si faltas una semana?",
                k:"dependencia"
            },

            {
                q:"¿Qué ocurre si faltas un mes?",
                k:"continuidad"
            },

            {
                q:"¿Tus procesos están documentados?",
                k:"documentacion"
            },

            {
                q:"¿Puedes medir resultados semanalmente?",
                k:"control"
            },

            {
                q:"¿La operación puede crecer sin caos?",
                k:"escalabilidad"
            }

        ];

        this.render();

    }

    render() {

        const section =
        document.createElement("section");

        section.className =
        "section observatory-section";

        section.id =
        "observatorio";

        section.innerHTML =

        `
        <div class="container narrow">

            <div class="section-header">

                <div class="eyebrow">
                    OBSERVATORIO AXIS
                </div>

                <h2>
                    Observa tu organización
                    desde otra perspectiva.
                </h2>

            </div>

            <div class="observatory-form">

                ${this.questions.map((item,index)=>`

                    <div class="obs-question">

                        <label>

                            ${item.q}

                        </label>

                        <select
                        data-score
                        id="obs${index}">

                            <option value="0">
                            No lo sé
                            </option>

                            <option value="1">
                            Mal
                            </option>

                            <option value="2">
                            Regular
                            </option>

                            <option value="3">
                            Bien
                            </option>

                            <option value="4">
                            Excelente
                            </option>

                        </select>

                    </div>

                `).join("")}

                <button id="axisObserve">

                    Observar

                </button>

            </div>

            <div
            id="axisObservationResult">

            </div>

        </div>
        `;

        const target =
        document.querySelector(
            ".future-section"
        );

        if(target){

            target.after(section);

        }

        document
        .getElementById(
            "axisObserve"
        )
        .addEventListener(
            "click",
            ()=>{

                this.calculate();

            }
        );

    }

    calculate() {

        const values =
        [...document.querySelectorAll(
            "[data-score]"
        )];

        const total =
        values.reduce(
            (sum,item)=>

            sum +
            parseInt(item.value),

            0
        );

        const max =
        values.length * 4;

        const percent =
        Math.round(
            (total/max)*100
        );

        document
        .getElementById(
            "axisObservationResult"
        )
        .innerHTML =

        `
        <div class="axis-score-card">

            <h3>

                Nivel de Comprensión Operativa

            </h3>

            <div class="axis-meter">

                <div
                class="axis-meter-fill"
                style="width:${percent}%">
                </div>

            </div>

            <div class="axis-percent">

                ${percent}%

            </div>

            <p>

                Este resultado no mide
                el tamaño de tu empresa.

            </p>

            <p>

                Mide qué tan visible es
                para ti su funcionamiento.

            </p>

        </div>
        `;

    }

}

window.addEventListener(
    "DOMContentLoaded",
    ()=>{

        new ObservatoryEngine();

    }
);