// WADM GLOBAL VARIABLES

interface WADM {
    readonly button: HTMLButtonElement;
    readonly table_body: HTMLElement;
    readonly heading_row: HTMLTableRowElement;
    criteriaNumber: number;
}
const WADM: WADM = {
    button: document.querySelector(
        '[data-wadm="buttons"]'
    )! as HTMLButtonElement,
    table_body: document.querySelector(
        '[data-wadm="table-body"]'
    )! as HTMLElement,
    heading_row: document.querySelector(
        '[data-wadm="heading-row"]'
    )! as HTMLTableRowElement,
    criteriaNumber: 1
};

interface WADM_WEIGHT_AND_OPTIONS {
    [key: string]: NodeListOf<HTMLTableColElement>;
}
const WADM_WEIGHT_AND_OPTIONS: WADM_WEIGHT_AND_OPTIONS = {};
const OPTION_SUM: number[] = [];

// WADM GLOBAL Event Listener
WADM.button.addEventListener("click", (e: Event) => {
    const target = e.target as HTMLElement;
    const button_data = target.dataset.wadm;

    if (button_data === "calculate") {
        calculate();
    } else if (button_data === "add-options") {
        addOption();
    } else if (button_data === "remove-options") {
        removeOption();
    } else if (button_data === "add-factor") {
        addFactor();
    } else if (button_data === "remove-factor") {
        removeFactor();
    }
});

// WADM GLOBAL FUNCTIONS
function addOption() {
    const option_data = getLastChild(WADM.heading_row);
    const option_number = Number(option_data.split("-")[1]);
    WADM.heading_row.insertAdjacentHTML(
        "beforeend",
        `<th contenteditable="true" data-wadm="option-${
            option_number + 1
        }">Option name</th>`
    );
}

function removeOption() {
    if (getLastChild(WADM.heading_row) === "option-2") {
        alert("You need at least two options to use WADM");
        return;
    }
    removeLastChild(WADM.heading_row);
}

function addFactor() {
    let total_column = getHeadingRowChildren();

    let row_data = "";
    for (const column of total_column) {
        const WADMValue = column.getAttribute("data-wadm");

        const dataAttributeValue =
            WADMValue === "factor"
                ? `${WADMValue}-${WADM.criteriaNumber}`
                : `${WADMValue}-factor-${WADM.criteriaNumber}`;
        const columnValue = WADMValue === "factor" ? "Factor Name" : 0;

        row_data += `<td contenteditable="true" data-wadm="${dataAttributeValue}">${columnValue}</td>`;
    }
    WADM.criteriaNumber += 1;
    WADM.table_body.insertAdjacentHTML("beforeend", `<tr>${row_data}</tr>`);
}

function removeFactor() {
    WADM.criteriaNumber = WADM.criteriaNumber > 1 ? WADM.criteriaNumber-- : 1;
    if (isAllowed("There is no factor to remove.")) {
        removeLastChild(WADM.table_body);
    }
}

function isAllowed(message: string) {
    const IsHeadingRow = getLastChild(WADM.table_body);
    if (IsHeadingRow) {
        alert(message);
        return false;
    }
    return true;
}

function calculate() {
    if (isAllowed("You must add a factor to calculate the result")) {
        selectWeightAndOptionEl();
        updateUIAndOptionSum();
        renderCalculation();
        disableAllButton();
        setTimeout(() => {
            alert("You need to refresh the page to use again");
        }, 3000);
    }
}

function selectWeightAndOptionEl() {
    const weightFactors = document.querySelectorAll(
        '[data-wadm^="weight-factor"]'
    ) as NodeListOf<HTMLTableColElement>;
    addWeightAndOption(weightFactors, "weight");

    let totalOptions = getHeadingRowChildren().length - 2;
    while (totalOptions > 0) {
        const wadm_option = document.querySelectorAll(
            `[data-wadm^='option-${totalOptions}-factor']`
        ) as NodeListOf<HTMLTableColElement>;
        addWeightAndOption(wadm_option, "option", totalOptions);
        totalOptions--;
    }
}

function updateUIAndOptionSum() {
    const optionsLength = Object.keys(WADM_WEIGHT_AND_OPTIONS).length;
    let optionNumber = 1;
    while (optionNumber < optionsLength) {
        updateOptionUI(
            WADM_WEIGHT_AND_OPTIONS[`option-${optionNumber}-factor`],
            optionNumber
        );
        OPTION_SUM.push(calEachOptionSum(`option-${optionNumber}-sum`));
        optionNumber++;
    }
}

function addWeightAndOption(
    wadm_option: NodeListOf<HTMLTableColElement>,
    colName: string,
    factorNumber?: number
): void {
    let key = `${colName}-${factorNumber}-factor`;
    if (colName === "weight") {
        key = `${colName}-factor`;
    }
    for (const _ in wadm_option) {
        WADM_WEIGHT_AND_OPTIONS[key] = wadm_option;
    }
}

function updateOptionUI(
    option: NodeListOf<HTMLTableColElement>,
    optionNumber: number
) {
    const weight = WADM_WEIGHT_AND_OPTIONS["weight-factor"];
    const weightLength = weight.length;

    let factorNumber = 0;
    while (factorNumber < weightLength) {
        const weightValue = weight[factorNumber].textContent;
        const factorValue = option[factorNumber].textContent;
        option[
            factorNumber
        ].innerHTML = `${weightValue} X ${factorValue} = <span class="option-${optionNumber}-sum">${
            Number(weightValue) * Number(factorValue)
        }</span>`;
        factorNumber += 1;
    }
}

function calEachOptionSum(optionEl: string) {
    const option = document.querySelectorAll(`.${optionEl}`);
    let sum = 0;
    for (const key of option) {
        sum += Number(key.textContent);
    }
    return sum;
}

function renderCalculation() {
    let optionsData = "";

    OPTION_SUM.forEach((element, index) => {
        const maxNumber = Math.max(...OPTION_SUM);
        const maxNumberIndex = OPTION_SUM.findIndex(
            (number) => number === maxNumber
        );
        if (index == maxNumberIndex) {
            optionsData += `<td class="winner" data-wadm="option-${
                index + 1
            }-sum">${element}</td>`;
            return;
        }
        optionsData += `<td data-wadm="option-${
            index + 1
        }-sum">${element}</td>`;
    });
    //  Use class="sum" in <tr> if you want to highlight the entire row and uncomment tr.sum css rule.
    const rowData = `<tr><td data-wadm="sum">SUM</td><td data-wadm="weight-sum">-</td>${optionsData}</tr>`;
    WADM.table_body.insertAdjacentHTML("beforeend", rowData);
}

function getHeadingRowChildren(): HTMLCollection {
    return WADM.heading_row.children!;
}

function getLastChild(parentElement: HTMLElement): string {
    return parentElement.lastElementChild!.getAttribute("data-wadm")!;
}

function removeLastChild(parentElement: HTMLElement): void {
    parentElement.lastElementChild!.remove();
}

function disableAllButton() {
    const actionButtons = document.querySelectorAll(
        ".btn"
    )! as NodeListOf<HTMLButtonElement>;
    for (const button of actionButtons) {
        button.disabled = true;
    }
}

// ACCORDION

const accParEl = document.querySelector(
    '[data-accordion="accordions"]'
) as HTMLDivElement;
const accBodyEls = document.querySelectorAll(
    "[data-accordion-body]"
) as NodeListOf<HTMLDivElement>;

accParEl?.addEventListener("click", (event: Event) => {
    const target = event.target as HTMLElement;
    target.getAttribute("data-accordion-icon");
    if (target.hasAttribute("data-accordion-icon")) {
        const iconValue = target.dataset.accordionIcon;
        let initIconValue: number = 1;
        for (const accBodyEl of accBodyEls) {
            const iconEl = document.querySelector(
                `[data-accordion-icon='${initIconValue}']`
            )!;
            const bodyValue = accBodyEl.dataset.accordionBody;
            const bodyEl = document.querySelector(
                `[data-accordion-body='${bodyValue}']`
            );

            if (iconValue === bodyValue) {
                bodyEl?.classList.toggle("js-accordion__body--active");
                iconEl.classList.replace("fa-plus", "fa-minus");
            } else {
                bodyEl?.classList.remove("js-accordion__body--active");
                iconEl.classList.replace("fa-minus", "fa-plus");
            }
            initIconValue++;
        }
    }
});