import API from "../../api.js";
import Events from "../../lib/events.js";
import TableBasePage from "../base_table.js";
import Utils from "../../lib/utils.js";

export default class PageMtgDecks extends TableBasePage {
    static hash = hashPageMtgDecks;
    static attrIdRowObject = attrDeckId;
    callSaveTableContent = API.saveDeck;

    constructor(router) {
        super(router);
    }

    initialize() {
        this.sharedInitialize();
    }
    hookupFilters() {
        /*
        this.sharedHookupFilters();
        this.hookupFilterActive();
        */
    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
    }
    getJsonRow(row) {
        return;
    }
    initialiseRowNew(tbody, row) {
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
        let newestRow = newRows[0];
        let clickableElementsSelector = [
            'td.' + attrCommanderBracketId + ' div.' + attrCommanderBracketId
        ].join('');
        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
            clickableElement.click();
        });
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupTableMainRows();
        this.hookupFieldsNameTable();
        this.hookupTableMainIsCommanderCheckboxes();
        this.hookupTableMainCommanderBracketPreviews();
        this.hookupFieldsActive();
    }
    hookupTableMainRows() {
        return;
        let rowSelector = 'table.' + flagTableMain + ' tbody tr';
        Events.hookupEventHandler("click", rowSelector, (event, row) => {
            let isRowExpanded = row.classList.contains(flagActive);
            let showSection;
            if (isRowExpanded) {
                showSection = false;
                PageMtgDecks.toggleShowDeckStatisticsSection(showSection);
            }
            else {
                showSection = true;
                let deckId = row.getAttribute(attrDeckId);
                let statisticsSectionTableBody = document.querySelector('table.' + flagStatistics + ' tbody');
                statisticsSectionTableBody.innerHTML = '';
                let deck = decks.filter(d => d[attrDeckId] == deckId)[0];
                if (deck[flagStatistics].length > 0) {
                    let newStatisticRowsHtml = '';
                    deck[flagStatistics]
                        .sort((a, b) => a[flagDisplayOrder] - b[flagDisplayOrder])
                        .forEach((statistic) => {
                            newStatisticRowsHtml += `
                                <tr ${attrStatisticId}="${statistic[attrStatisticId]}">
                                    <td class="${flagName}">${statistic[flagName]}</td>
                                    <td class="${flagValue}">${statistic[flagValue]}</td>
                                </tr>
                            `;
                        });
                    statisticsSectionTableBody.innerHTML = newStatisticRowsHtml;
                }
                PageMtgDecks.toggleShowDeckStatisticsSection(showSection);
            }
        });
    }
    static toggleShowDeckStatisticsSection(showSection) {
        let statisticsSectionTableBody = document.querySelector('table.' + flagStatistics + ' tbody');
        if (showSection) {
            statisticsSectionTableBody.classList.remove(flagIsCollapsed);
        }
        else {
            statisticsSectionTableBody.classList.add(flagIsCollapsed);
        }
    }
    hookupTableMainIsCommanderCheckboxes() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsCommander + ' .' + flagIsCommander);
    }
    hookupTableMainCommanderBracketPreviews() {
        this.hookupTableCellDdlPreviews(
              attrCommanderBracketId
            , Utils.getListFromDict(commanderBrackets)
        );
    }
    
    leave() {
        super.leave();
    }
}