import BusinessObjects from "../lib/business_objects/business_objects.js";
import Events from "../lib/events.js";
import LocalStorage from "../lib/local_storage.js";
import Validation from "../lib/validation.js";
import BasePage from "./base.js";
import API from "../api.js";
import DOM from "../dom.js";
import Utils from "../lib/utils.js";

import OverlayConfirm from "../components/common/temporary/overlay_confirm.js";
import OverlayError from "../components/common/temporary/overlay_error.js";

export default class TableBasePage extends BasePage {
    // static hash
    // static attrIdRowObject
    // callSaveTableContent

    constructor(router) {
        super(router);
        this.cursorYInitial = null;
        this.rowInitial = null;
        this.placeholder = null;
        this.dragSrcEl = null;
        this.dragSrcRow = null;

        this.hookupTableCellDdls = this.hookupTableCellDdls.bind(this);
    }
    
    initialize(isPopState = false) {
        throw new Error("Must implement initialize() method.");
    }
    sharedInitialize(isPopState = false, isSinglePageApp = false) {
        if (!isPopState) {
            super.sharedInitialize();
            this.hookupFilters();
            this.hookupButtonsSaveCancel();
            this.hookupTableMain();
            OverlayConfirm.hookup(() => {
                if (isSinglePageApp) {
                    this.saveRecordsTableDirtySinglePageApp();
                }
                else {
                    this.saveRecordsTableDirty();
                }
            });
        } else {
            let dataPage = this.getLocalStoragePage();
            let filters = dataPage[flagFormFilters];
            let formFilters = this.getFormFilters();
            let filtersDefault = DOM.convertForm2JSON(formFilters);
            if (!Validation.areEqualDicts(filters, filtersDefault)) {
                this.callFilterTableContent();
            }
        }
    }
    hookupFilters() {
        if (this.constructor === TableBasePage) {
            throw new Error("Subclass of TableBasePage must implement method hookupFilters().");
        }
    }
    sharedHookupFilters() {
        this.hookupButtonApplyFilters();
    }
    hookupFilterActive() {
        this.hookupFilter(flagActive);
    }
    hookupFilter(filterFlag, handler = (event, filter) => { return TableBasePage.isDirtyFilter(filter); }) {
        let filterSelector = idFormFilters + ' .' + filterFlag;
        this.hookupEventHandler("change", filterSelector, handler);
    }
    static isDirtyFilter(filter) {
        let isDirty = DOM.updateAndCheckIsElementDirty(filter);
        if (isDirty) {
            let tbody = document.querySelector(idTableMain + ' tbody');
            tbody.querySelectorAll('tr').remove();
            tbody.appendChild(document.createElement('<div>Press "Apply Filters" to refresh the table.</div>'));
        }
        return isDirty;
    }
    hookupFilterIsNotEmpty() {
        this.hookupFilter(flagIsNotEmpty);
    }
    hookupButtonApplyFilters() {
        this.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
            event.stopPropagation();
            this.callFilterTableContent();
        });
    }
    /*
    getAndLoadFilteredTableContent = () => {
        this.callFilterTableContent()
            .catch(error => console.error('Error:', error));
    }
    */
    getFormFilters() {
        return document.querySelector(idFormFilters);
    }
    callFilterTableContent() {
        let formFilters = this.getFormFilters();
        let filtersJson = DOM.convertForm2JSON(formFilters);
        this.leave();
        API.goToHash(this.constructor.hash, filtersJson);
    }
    callbackLoadTableContent(response) {
        let table = TableBasePage.getTableMain();
        let bodyTable = table.querySelector('tbody');
        bodyTable.querySelectorAll('tr').forEach(function(row) { row.remove(); });
        let rowsJson = response.data[flagRows];
        if (!Validation.isEmpty(rowsJson) && rowsJson.every(row => row.hasOwnProperty('display_order'))) {
            rowsJson = rowsJson.sort((a, b) => a.display_order - b.display_order);
        }
        rowsJson.forEach(this.loadRowTable.bind(this));
        this.hookupTableMain();
    }
    static getTableMain() {
        return document.querySelector(idTableMain);
    }
    loadRowTable(rowJson) {
        throw new Error("Subclass of TableBasePage must implement method loadRowTable().");
    }
    getAndLoadFilteredTableContentSinglePageApp() {
        this.callFilterTableContent()
            .then(data => {
                if (_verbose) { console.log('Table data received:', data); }
                this.callbackLoadTableContent(data);
            })
            .catch(error => console.error('Error:', error));
    }
    hookupButtonsSaveCancel() {
        this.hookupButtonSave();
        this.hookupButtonCancel();
        this.toggleShowButtonsSaveCancel(false);
    }
    saveRecordsTableDirty() {
        let records = this.getTableRecords(true);
        if (records.length == 0) {
            OverlayError.show('No records to save');
            return;
        }
        let formElement = this.getFormFilters();
        let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
        this.callSaveTableContent(records, formElement, comment)
            .then(data => {
                if (data[flagStatus] == flagSuccess) {
                    if (_verbose) { 
                        console.log('Records saved!');
                        console.log('Data received:', data);
                    }
                    this.callFilterTableContent();
                }
                else {
                    if (_verbose) { console.log("error: ", data[flagMessage]); }
                    OverlayError.show(data[flagMessage]);
                }
            })
            .catch(error => console.error('Error:', error));
    }
    getTableRecords(dirtyOnly = false) {
        let records = [];
        let record;
        document.querySelectorAll(idTableMain + ' > tbody > tr').forEach((row) => {
            if (dirtyOnly && !DOM.hasDirtyChildrenContainer(row)) return;
            record = this.getJsonRow(row);
            records.push(record);
        });
        return records;
    }
    getJsonRow(row) {
        throw new Error("Subclass of TableBasePage must implement method getJsonRow().");
    }
    saveRecordsTableDirtySinglePageApp() {
        let records = this.getTableRecords(true);
        if (records.length == 0) {
            OverlayError.show('No records to save');
            return;
        }
        let formElement = this.getFormFilters();
        let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
        this.callSaveTableContent(records, formElement, comment)
            .then(data => {
                if (data[flagStatus] == flagSuccess) {
                    if (_verbose) { 
                        console.log('Records saved!');
                        console.log('Data received:', data);
                    }
                    this.callbackLoadTableContent(data);
                }
                else {
                    if (_verbose) { console.log("error: ", data[flagMessage]); }
                    OverlayError.show(data[flagMessage]);
                }
            })
            .catch(error => console.error('Error:', error));
    }
    hookupButtonCancel() {
        Events.initialiseEventHandler(idFormFilters + ' button.' + flagCancel, flagInitialised, (button) => {
            button.addEventListener("click", (event) => {
                event.stopPropagation();
                this.callFilterTableContent();
            });
            button.classList.add(flagCollapsed);
        });
    }
    handleClickAddRowTable(event, button) {
        event.stopPropagation();
        _rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - _rowBlank.getAttribute(this.constructor.attrIdRowObject));
        let tbody = document.querySelector(idTableMain + ' tbody');
        let row = _rowBlank.cloneNode(true);
        row.classList.remove(flagInitialised);
        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
            element.classList.remove(flagInitialised);
        });
        let countRows = document.querySelectorAll(idTableMain + ' > tbody > tr').length;
        row.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
        this.initialiseRowNew(tbody, row);
        tbody.appendChild(row);
        this.hookupTableMain();
    }
    initialiseRowNew(tbody, row) {
        if (this.constructor === TableBasePage) {
            throw new Error("Subclass of TableBasePage must implement method initialiseRowNew().");
        }
        row.classList.remove(flagRowNew);
    }
    hookupTableMain() {
        if (this.constructor === TableBasePage) {
            throw new Error("Must implement hookupTableMain() method.");
        }
        if (true) { // _rowBlank == null) {
            Events.initialiseEventHandler(idTableMain, flagInitialised, (table) => {
               this.cacheRowBlank();
            });
        }
    }
    cacheRowBlank() {
        let selectorRowNew = idTableMain + ' tbody tr.' + flagRowNew;
        let rowBlankTemp = document.querySelector(selectorRowNew);
        if (_verbose) { console.log("row blank temp: ", rowBlankTemp); }
        let countRows = document.querySelectorAll(idTableMain + ' > tbody > tr').length;
        _rowBlank = rowBlankTemp.cloneNode(true);
        document.querySelectorAll(selectorRowNew).forEach(function(row) {
            row.remove();
        });
        _rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
    }
    initialiseSliderDisplayOrderRowNew(tbody, row) {
        // let tdSelector = ':scope > tr > td.' + flagDisplayOrder;
        // let tbody = document.querySelector('table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody');
        let slidersDisplayOrder = tbody.querySelectorAll(':scope > tr > td.' + flagDisplayOrder + ' input.' + flagSlider);
        let maxDisplayOrder = 0;
        slidersDisplayOrder.forEach((slider) => {
            maxDisplayOrder = Math.max(maxDisplayOrder, parseFloat(DOM.getElementValueCurrent(slider)));
        });
        let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
        DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, maxDisplayOrder + 1);
    }
    hookupSlidersDisplayOrderTable() {
        let selectorDisplayOrder = idTableMain + ' tbody tr td.' + flagDisplayOrder + ' input.' + flagSlider + '.' + flagDisplayOrder;
        /*
        Events.initialiseEventHandler(selectorDisplayOrder, flagInitialised, (sliderDisplayOrder) => {
            /*
            sliderDisplayOrder.setAttribute('draggable', true);
            sliderDisplayOrder.addEventListener('dragstart', this.handleDragSliderStart.bind(this), false);
            sliderDisplayOrder.addEventListener('dragenter', this.handleDragSliderEnter.bind(this), false);
            sliderDisplayOrder.addEventListener('dragover', this.handleDragSliderOver.bind(this), false);
            sliderDisplayOrder.addEventListener('dragleave', this.handleDragSliderLeave.bind(this), false);
            sliderDisplayOrder.addEventListener('drop', this.handleDropSlider.bind(this), false);
            sliderDisplayOrder.addEventListener('dragend', this.handleDragSliderEnd.bind(this), false);
            *
            sliderDisplayOrder.addEventListener('change', (event) => {
                console.log("slider change event");
                this.handleChangeNestedElementCellTable(sliderDisplayOrder);
            });
        });
        */
        this.hookupChangeHandlerTableCells(selectorDisplayOrder);
    }
    hookupChangeHandlerTableCells(inputSelector, handler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
        Events.initialiseEventHandler(inputSelector, flagInitialised, (input) => {
            input.addEventListener("change", (event) => {
                handler(event, input);
            });
            handler(null, input);
        });
        // this.hookupEventHandler("change", inputSelector, handler);
    }
    /*
    handleChangeElementCellTable(event, element) {
        let row = DOM.getRowFromElement(element);
        let td = DOM.getCellFromElement(element);
        let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
        let wasDirtyElement = element.classList.contains(flagDirty);
        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
        if (isDirtyElement != wasDirtyElement) {
            DOM.handleDirtyElement(td, isDirtyElement);
            let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
            if (isNowDirtyRow != wasDirtyRow) {
                DOM.handleDirtyElement(row, isNowDirtyRow);
                let rows = this.getTableRecords(true);
                let existsDirtyRecord = rows.length > 0;
                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
            }
        }
    }
    handleChangeElementNestedCellTable(event, element, flagColumnList = [], orderNesting = 1) {
        let orderNestingTemp = orderNesting;
        let row, td, nestedRowSelector;
        while (orderNestingTemp > 0) {
            nestedRowSelector = idTableMain;
            for (let indexOrderNesting = 0; indexOrderNesting < orderNestingTemp; indexOrderNesting++) {
                nestedRowSelector += ' tbody tr';
            }
            row = DOM.getClosestParent(element, nestedRowSelector);
            td = row.querySelector('td.' + flag);
        }
        let row = DOM.getRowFromElement(element);
        let td = DOM.getCellFromElement(element);
        let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
        let wasDirtyElement = element.classList.contains(flagDirty);
        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
        if (isDirtyElement != wasDirtyElement) {
            DOM.handleDirtyElement(td, isDirtyElement);
            let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
            if (isNowDirtyRow != wasDirtyRow) {
                DOM.handleDirtyElement(row, isNowDirtyRow);
                let rows = this.getTableRecords(true);
                let existsDirtyRecord = rows.length > 0;
                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
            }
        }
    }
    handleChangeElementSubtableCell(event, element, flagFieldSubtable) {
        let rowSubtable = element.closest(idTableMain + ' td.' + flagFieldSubtable + ' tbody tr');
        let rowTable = rowSubtable.closest(idTableMain + ' > tbody > tr');
        let td = DOM.getCellFromElement(element);
        // let tdSubtable = td.closest('td.' + flagFieldSubtable);
        let wasDirtyRowSubtable = DOM.hasDirtyChildrenContainer(rowSubtable);
        let wasDirtyRowTable = DOM.hasDirtyChildrenContainer(rowTable);
        let wasDirtyElement = element.classList.contains(flagDirty);
        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
        console.log({isDirtyElement, wasDirtyElement});
        if (isDirtyElement != wasDirtyElement) {
            DOM.handleDirtyElement(td, isDirtyElement);
            let isNowDirtyRowSubtable = DOM.hasDirtyChildrenContainer(rowSubtable);
            console.log({isNowDirtyRowSubtable, wasDirtyRowSubtable});
            if (isNowDirtyRowSubtable != wasDirtyRowSubtable) {
                DOM.handleDirtyElement(rowSubtable, isNowDirtyRowSubtable);
                let isNowDirtyRowTable = DOM.hasDirtyChildrenContainer(rowTable);
                console.log({isNowDirtyRowTable, wasDirtyRowTable});
                if (isNowDirtyRowTable != wasDirtyRowTable) {
                    DOM.handleDirtyElement(rowTable, isNowDirtyRowTable);
                    let rows = this.getTableRecords(true);
                    let existsDirtyRecord = rows.length > 0;
                    this.toggleShowButtonsSaveCancel(existsDirtyRecord);
                }
            }
        }
    }
    */
    handleChangeNestedElementCellTable(event, element) {
        let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
        let wasDirtyElement = element.classList.contains(flagDirty);
        let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
        if (_verbose) { console.log({isDirtyElement, wasDirtyElement, wasDirtyParentRows}); }
        let td = DOM.getCellFromElement(element);
        DOM.setElementAttributeValueCurrent(td, DOM.getElementAttributeValueCurrent(element));
        if (isDirtyElement != wasDirtyElement) {
            DOM.handleDirtyElement(td, isDirtyElement);
            this.updateAndToggleShowButtonsSaveCancel();
            this.cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows);
        }
    }
    getAllIsDirtyRowsInParentTree(element) {
        let rows = [];
        let parent = element;
        let isDirty;
        while (parent) {
            if (parent.matches('tr')) {
                isDirty = parent.classList.contains(flagDirty)
                rows.push(isDirty);
            }
            parent = parent.parentElement;
        }
        return rows;
    }
    cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows) {
        if (Validation.isEmpty(wasDirtyParentRows)) return;
        let td = DOM.getCellFromElement(element);
        let isDirtyTd = isDirtyElement || DOM.hasDirtyChildrenContainer(tr);
        DOM.handleDirtyElement(td, isDirtyTd);
        let tr = DOM.getRowFromElement(td);
        let isDirtyRow = isDirtyTd || DOM.hasDirtyChildrenContainer(tr);
        let wasDirtyRow = wasDirtyParentRows.shift();
        if (_verbose) { console.log({isDirtyRow, wasDirtyRow}); }
        if (isDirtyRow != wasDirtyRow) {
            DOM.handleDirtyElement(tr, isDirtyRow);
            this.updateAndToggleShowButtonsSaveCancel();
            this.cascadeChangedIsDirtyNestedElementCellTable(tr.parentElement, isDirtyRow, wasDirtyParentRows);
        }
    }
    hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector, handler = (event, element) => {
        if (!element.classList.contains(flagCollapsed)) this.handleChangeNestedElementCellTable(event, element);
    }) {
        this.hookupEventHandler("change", inputSelector, handler);
    }
    /* ToDo: Fix this slider drag and drop functionality
    handleDragSliderStart(event) {
        this.dragSrcEl = event.target;
        event.dataTransfer.effectAllowed = flagMove;
        /*
        console.log("setting outer html: ", this.dragSrcEl.outerHTML);
        event.dataTransfer.setData('text/html', this.dragSrcEl.outerHTML);
        *
        this.dragSrcRow = DOM.getRowFromElement(this.dragSrcEl);
        this.dragSrcEl.classList.add(flagDragging);
    }
    handleDragSliderOver(event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.dataTransfer.dropEffect = flagMove;
        return false;
    }
    handleDragSliderEnter(event) {
        event.target.closest('tr').classList.add(flagDragOver);
    }
    handleDragSliderLeave(event) {
        event.target.closest('tr').classList.remove(flagDragOver);
    }
    handleDropSlider(event) {
        event.stopPropagation();
        let targetRow = DOM.getRowFromElement(event.target);
        if (this.dragSourceRow != targetRow) {
            targetRow.classList.remove(flagDragOver);
            this.dragSrcEl.classList.remove(flagDragging);
            let sourceRowClone = this.dragSrcRow.cloneNode(true);
            let targetRowClone = targetRow.cloneNode(true);
            console.log("sourceRowClone: ", sourceRowClone);
            console.log("targetRowClone: ", targetRowClone);
            let tbody = targetRow.closest('tbody');
            tbody.replaceChild(sourceRowClone, targetRow);
            tbody.replaceChild(targetRowClone, this.dragSrcRow);
            this.refreshDisplayOrders();
        }
        return false;
    }
    handleDragSliderEnd(event) {
        let table = TableBasePage.getTableMain();
        let rows = table.querySelectorAll('tr');
        rows.forEach(row => {
            row.classList.remove(flagDragOver);
            row.classList.remove(flagDragging);
        });
    }
    refreshDisplayOrders() {
        console.log("updating display order values");
        let rows = document.querySelectorAll(idTableMain + 'tbody tr.' + flagRow);
        rows.forEach((row, indexRow) => {
            sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
            sliderDisplayOrder.setAttribute(attrValueCurrent, indexRow);
        });
    }
    */
    hookupTextareasCodeTable() {
        this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagCode + ' textarea');
    }
    hookupTextareasNameTable() {
        this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagName + ' textarea');
    }
    hookupTextareasDescriptionTable() {
        this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagDescription + ' textarea');
    }
    hookupFieldsActive(flagTable = '', handleClickRowNew = (event, element) => { this.handleClickAddRowTable(event, element); }) {
        let selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' button';
        let selectorButtonDelete = selectorButton + '.' + flagDelete;
        let selectorButtonUndelete = selectorButton + ':not(.' + flagDelete + ')';
        console.log("hookupFieldsActive: ", selectorButtonDelete, selectorButtonUndelete);
        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
        this.hookupEventHandler(
            "click"
            , 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' button'
            , (event, button) => { handleClickRowNew(event, button); }
        );
    }
    hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete) {
        this.hookupEventHandler("click", selectorButtonDelete, (event, element) => {
            this.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete);
        });
    }
    handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
        let row = DOM.getRowFromElement(element);
        // row.classList.add(flagDelete);
        if (row.classList.contains(flagRowNew) && !DOM.hasDirtyChildrenContainer(row)) {
            row.parentNode.removeChild(row);
        }
        let buttonAdd = element.cloneNode(false); // document.createElement("button");
        buttonAdd.classList.remove(flagInitialised);
        buttonAdd.classList.remove(flagDelete);
        buttonAdd.classList.add(flagAdd);
        buttonAdd.textContent = '+';
        // DOM.setElementAttributeValueCurrent(buttonAdd, false);
        element.replaceWith(buttonAdd);
        this.handleChangeNestedElementCellTable(null, buttonAdd);
        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
        this.updateAndToggleShowButtonsSaveCancel();
    }
    hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete) {
        this.hookupEventHandler("click", selectorButtonUndelete, (event, element) => {
            this.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete);
        });
    }
    handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
        // let row = DOM.getRowFromElement(element);
        // row.classList.remove(flagDelete);
        let buttonDelete = element.cloneNode(false); // document.createElement("button");
        buttonDelete.classList.remove(flagInitialised);
        buttonDelete.classList.remove(flagAdd);
        buttonDelete.classList.add(flagDelete);
        buttonDelete.textContent = 'x';
        // DOM.setElementAttributeValueCurrent(buttonDelete, true);
        element.replaceWith(buttonDelete);
        this.handleChangeNestedElementCellTable(null, buttonDelete);
        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
        this.updateAndToggleShowButtonsSaveCancel();
    }
    hookupTdsAccessLevel() {
        let cellSelector = idTableMain + ' tbody td.' + flagAccessLevel;
        this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(accessLevels));
    }
    hookupTableCellDdlPreviews(
        cellSelector
        , optionList
        , ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }
        , changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
    ) {
        this.hookupEventHandler("click", cellSelector, (event, td) => {
            this.handleClickTableCellDdlPreview(
                event
                , td
                , optionList
                , cellSelector
                , (cellSelector) => { ddlHookup(
                    cellSelector
                    , (event, element) => { changeHandler(event, element); }
                ); }
            );
        });
        ddlHookup(cellSelector + ' select');
    }
    hookupTableCellDdls(ddlSelector, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
        this.hookupEventHandler("change", ddlSelector, (event, element) => { changeHandler(event, element); });
    }
    handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
        if (td.querySelector('select')) return;
        // td.removeEventListener("click", ddlHookup);
        let tdNew = td.cloneNode(true);
        td.parentNode.replaceChild(tdNew, td);
        let idSelected = DOM.getElementAttributeValueCurrent(tdNew);
        tdNew.innerHTML = '';
        let ddl = document.createElement('select');
        DOM.setElementValuesCurrentAndPrevious(ddl, idSelected);
        let optionJson, option;
        if (_verbose) { 
            console.log("click table cell ddl preview");
            console.log({optionObjectList, cellSelector});
        }
        option = DOM.createOption(null);
        ddl.appendChild(option);
        optionObjectList.forEach((optionObjectJson) => {
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(optionObjectJson, idSelected);
            option = DOM.createOption(optionJson);
            ddl.appendChild(option);
        });
        tdNew.appendChild(ddl);
        let ddlSelector = cellSelector + ' select';
        ddlHookup(ddlSelector);
    }
    /*
    handleChangeTableCellDdl(event, ddl) {
        let row = DOM.getRowFromElement(ddl);
        let td = DOM.getCellFromElement(ddl);
        console.log("td: ", td);
        let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
        let wasDirtyElement = ddl.classList.contains(flagDirty);
        let isDirtyElement = DOM.updateAndCheckIsElementDirty(ddl);
        console.log("isDirtyElement: ", isDirtyElement);
        console.log("wasDirtyElement: ", wasDirtyElement);
        if (isDirtyElement != wasDirtyElement) {
            DOM.handleDirtyElement(td, isDirtyElement);
            let optionSelected = ddl.options[ddl.selectedIndex];
            DOM.setElementAttributeValueCurrent(td, optionSelected.value);
            let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
            console.log("isNowDirtyRow: ", isNowDirtyRow);
            console.log("wasDirtyRow: ", wasDirtyRow);
            if (isNowDirtyRow != wasDirtyRow) {
                DOM.handleDirtyElement(row, isNowDirtyRow);
                let rows = this.getTableRecords(true);
                let existsDirtyRecord = rows.length > 0;
                console.log("dirty records:", rows);
                console.log("existsDirtyRecord:", existsDirtyRecord);
                this.toggleShowButtonsSaveCancel(existsDirtyRecord);
            }
        }
    }
    */
    hookupTableCellDDlPreviewsWhenNotCollapsed(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
        this.hookupEventHandler("click", cellSelector, (event, td) => {
            let div = td.querySelector('div');
            if (!div || div.classList.contains(flagCollapsed)) return;
            this.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
        });
    }
    hookupProductCategoryDdls(ddlSelector) {
        this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeProductCategoryDdl(event, element); });
    }
    handleChangeProductCategoryDdl(event, ddlCategory) {
        this.handleChangeNestedElementCellTable(event, ddlCategory);
        let idProductCategorySelected = DOM.getElementAttributeValueCurrent(ddlCategory);
        let row = DOM.getRowFromElement(ddlCategory);
        let tdProduct = row.querySelector('td.' + flagProduct);
        tdProduct.dispatchEvent(new Event('click'));
        let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
        ddlProduct.innerHTML = '';
        ddlProduct.appendChild(DOM.createOption(null));
        let optionJson, option;
        Utils.getListFromDict(products).forEach((product) => {
            if (idProductCategorySelected != '0' && product[attrIdProductCategory] != idProductCategorySelected) return;
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
            option = DOM.createOption(optionJson);
            ddlProduct.appendChild(option);
        });
        this.handleChangeNestedElementCellTable(event, ddlProduct);
    }
    hookupFieldsProductPermutationVariation() {
        this.hookupPreviewsProductPermutationVariation();
        this.hookupDdlsProductPermutationVariationType();
        this.hookupDdlsProductPermutationVariation();
        this.hookupButtonsProductPermutationVariationAddDelete(); 
    }
    hookupPreviewsProductPermutationVariation() {
        this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
    }
    handleClickProductPermutationVariationsPreview(event, element) {
        let tblVariations = element.querySelector('table.' + flagProductVariations);
        if (!Validation.isEmpty(tblVariations)) return;
        this.toggleColumnCollapsed(flagProductVariations, false);
        let permutationVariations = this.getElementProductVariations(element);
        tblVariations = document.createElement("table");
        tblVariations.classList.add(flagProductVariations);
        let thead = document.createElement("thead");
        let tr = document.createElement("tr");
        let thVariationType = document.createElement("th");
        thVariationType.classList.add(flagProductVariationType);
        thVariationType.textContent = 'Type';
        let thNameVariation = document.createElement("th");
        thNameVariation.classList.add(flagProductVariation);
        thNameVariation.textContent = 'Name';
        let buttonAdd = document.createElement("button");
        buttonAdd.classList.add(flagAdd);
        buttonAdd.textContent = '+';
        let thAddDelete = document.createElement("th");
        thAddDelete.classList.add(flagAdd);
        thAddDelete.appendChild(buttonAdd);
        tr.appendChild(thVariationType);
        tr.appendChild(thNameVariation);
        tr.appendChild(thAddDelete);
        thead.appendChild(tr);
        tblVariations.appendChild(thead);
        let tbody = document.createElement("tbody");
        if (!Validation.isEmpty(permutationVariations)) {
            permutationVariations.forEach((permutationVariation, index) => {
                this.addProductPermutationVariationRow(tbody, permutationVariation);
            });
        }
        tblVariations.appendChild(tbody);
        if (_verbose) { 
            console.log("click product permutation variations preview");
            console.log('variations:', permutationVariations);
            console.log("tblVariations: ", tblVariations);
        }

        let cellParent = element.closest(idTableMain + ' tbody tr td.' + flagProductVariations);
        cellParent.innerHTML = '';
        cellParent.appendChild(tblVariations);
        
        this.hookupFieldsProductPermutationVariation();
    }
    toggleColumnCollapsed(flagColumn, isCollapsed) {
        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagCollapsed);
    }
    toggleColumnHeaderCollapsed(flagColumn, isCollapsed) {
        this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagCollapsed);
    }
    getElementProductVariations(element) {
        let permutationVariations = element.getAttribute(attrValueCurrent);
        let objVariations = [];
        let parts, new_variation, new_variation_type;
        if (!Validation.isEmpty(permutationVariations)) {
            permutationVariations = permutationVariations.split(',');
            permutationVariations.forEach((variation) => {
                parts = variation.split(':');
                if (parts.length == 2) {
                    if (_verbose) { console.log("parts: ", parts); }
                    new_variation_type = productVariationTypes[parts[0].trim()];
                    new_variation = productVariations[parts[1].trim()];
                    objVariations.push({
                        [flagProductVariationType]: new_variation_type,
                        [flagProductVariation]: new_variation,
                    });
                }
                else {
                    if (_verbose) { console.log("error: invalid variation: ", variation); }
                }
            });
        }
        return objVariations;
    }
    static createOptionUnselectedProductVariation() {
        return {
            [flagProductVariationType]: {
                [flagNameAttrOptionText]: [flagName],
                [flagNameAttrOptionValue]: [attrIdProductVariationType],
                [flagName]: 'Select Variation Type',
                [attrIdProductVariationType]: 0,
            },
            [flagProductVariation]: {
                [flagNameAttrOptionText]: [flagName],
                [flagNameAttrOptionValue]: [attrIdProductVariation],
                [flagName]: 'Select Variation',
                [attrIdProductVariation]: 0,
            },
        };
    }
    addProductPermutationVariationRow(tbody, permutationVariation) {
        if (_verbose) { console.log("permutationVariation: ", permutationVariation); }
        let productVariationType, optionProductVariationTypeJson, optionProductVariationType, productVariation, optionProductVariationJson, optionProductVariation;
        /*
        if (Validation.isEmpty(variations)) {
            return;
        }
        */
        let productVariationKeys = Object.keys(productVariations);
        let productVariationTypeKeys = Object.keys(productVariationTypes);
        
        let ddlsProductVariationType = tbody.querySelectorAll('select.' + flagProductVariationType);
        let productVariationTypeKeysSelected = new Set();
        let valueSelected;
        let doFilterProductVariationKeys = permutationVariation[attrIdProductVariationType] != 0;
        ddlsProductVariationType.forEach((ddlProductVariationType) => {
            valueSelected = DOM.getElementValueCurrent(ddlProductVariationType);
            productVariationTypeKeysSelected.add(valueSelected);
        });
        productVariationTypeKeys = productVariationTypeKeys.filter(typeKey => !productVariationTypeKeysSelected.has(typeKey));
        if (productVariationTypeKeys.length == 0) return;
        if (doFilterProductVariationKeys) {
            productVariationKeys = productVariationKeys.filter(variationKey => !productVariationTypeKeysSelected.has(productVariations[variationKey][attrIdProductVariationType]));
        }
        
        let permutationVariationJson = permutationVariation[flagProductVariation];
        let permutationVariationTypeJson = permutationVariation[flagProductVariationType];
        
        let tdVariationType = document.createElement("td");
        tdVariationType.classList.add(flagProductVariationType);
        DOM.setElementAttributesValuesCurrentAndPrevious(tdVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
        
        let ddlVariationType = document.createElement("select");
        ddlVariationType.classList.add(flagProductVariationType);
        DOM.setElementAttributesValuesCurrentAndPrevious(ddlVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
        
        optionProductVariationType = DOM.createOption(null);
        if (_verbose) { console.log("optionProductVariationType: ", optionProductVariationType); }
        ddlVariationType.appendChild(optionProductVariationType);

        productVariationTypeKeys.forEach((productVariationTypeKey) => {
            /*
            optionProductVariationType = document.createElement('option');
            optionProductVariationType.value = optionVariationType.value;
            optionProductVariationType.text = optionVariationType.text;
            */
            productVariationType = productVariationTypes[productVariationTypeKey];
            optionProductVariationTypeJson = BusinessObjects.getOptionJsonFromObjectJson(productVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
            optionProductVariationType = DOM.createOption(optionProductVariationTypeJson);
            if (_verbose) { console.log("optionProductVariationType: ", optionProductVariationType); }
            ddlVariationType.appendChild(optionProductVariationType);
        });
        
        let tdVariation = document.createElement("td");
        tdVariation.classList.add(flagProductVariation);
        DOM.setElementAttributesValuesCurrentAndPrevious(tdVariation, permutationVariationJson[attrIdProductVariation]);

        let ddlVariation = document.createElement("select");
        ddlVariation.classList.add(flagProductVariation);
        DOM.setElementAttributesValuesCurrentAndPrevious(ddlVariation, permutationVariationJson[attrIdProductVariation]);
        
        optionProductVariation = DOM.createOption(null);
        if (_verbose) { console.log("optionProductVariation: ", optionProductVariation); }
        ddlVariation.appendChild(optionProductVariation);

        productVariationKeys.forEach((productVariationKey) => {
            productVariation = productVariations[productVariationKey];
            optionProductVariationJson = BusinessObjects.getOptionJsonFromObjectJson(productVariation, permutationVariationJson[attrIdProductVariation]);
            optionProductVariation = DOM.createOption(optionProductVariationJson);
            if (_verbose) { console.log("optionProductVariation: ", optionProductVariation); }
            ddlVariation.appendChild(optionProductVariation);
        });
        
        let tdDelete = document.createElement("td");
        tdDelete.classList.add(flagDelete);
        
        let buttonDelete = document.createElement("button");
        buttonDelete.classList.add(flagDelete);
        buttonDelete.textContent = 'x';

        let tr = document.createElement("tr");
        tr.classList.add(flagProductVariation);
        tdVariationType.appendChild(ddlVariationType);
        tr.appendChild(tdVariationType);
        tdVariation.appendChild(ddlVariation);
        tr.appendChild(tdVariation);
        tdDelete.appendChild(buttonDelete);
        tr.appendChild(tdDelete);
        tbody.appendChild(tr);
    }
    hookupDdlsProductPermutationVariationType() {
        this.hookupTableCellDdls(
            idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType + ' select'
            , (event, ddlVariationType) => { 
                this.handleChangeDdlProductVariationOrVariationType(event, ddlVariationType);
                let idVariationTypeSelected = DOM.getElementValueCurrent(ddlVariationType);
                let row = DOM.getRowFromElement(ddlVariationType);
                let tdVariation = row.querySelector('td.' + flagProductVariation);
                tdVariation.dispatchEvent(new Event('click'));
                let ddlVariation = row.querySelector('td.' + flagProductVariation + ' select');
                ddlVariation.innerHTML = '';
                ddlVariation.appendChild(DOM.createOption(null));
                let optionJson, option;
                let variationType = productVariationTypes[idVariationTypeSelected];
                if (variationType == null) variationType = {
                    [flagProductVariations]: [],
                };
                variationType[flagProductVariations].forEach((variation) => {
                    optionJson = BusinessObjects.getOptionJsonFromObjectJson(variation);
                    option = DOM.createOption(optionJson);
                    ddlVariation.appendChild(option);
                });
                this.handleChangeDdlProductVariationOrVariationType(event, ddlVariation);
            }
        );
    }
    handleChangeDdlProductVariationOrVariationType(event, element) {
        this.handleChangeNestedElementCellTable(event, element);
        this.updateProductPermutationVariations(element);
    }
    hookupDdlsProductPermutationVariation() {
        this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation + ' select', (event, ddlVariation) => { this.handleChangeDdlProductVariationOrVariationType(event, ddlVariation); });
    }
    hookupButtonsProductPermutationVariationAddDelete() {
        let selectorButton = idTableMain + ' td.' + flagProductVariations + ' tr.' + flagProductVariation + ' button';
        let selectorButtonDelete = selectorButton + '.' + flagDelete;
        let selectorButtonUndelete = selectorButton + '.' + flagAdd;
        this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, (event, element) => {
            this.handleClickButtonRowDelete(event, element);
            this.updateProductPermutationVariations(element);
        });
        this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
        this.hookupButtonsProductPermutationVariationAdd();
    }
    hookupButtonsProductPermutationVariationAdd() {
        this.hookupEventHandler(
            "click"
            , idTableMain + ' td.' + flagProductVariations + ' button.' + flagAdd
            , (event, element) => { this.handleClickButtonProductPermutationVariationAdd(event, element); }
        );
    }
    handleClickButtonProductPermutationVariationAdd(event, element) {
        let variationsCell = element.closest('td.' + flagProductVariations);
        let tbody = variationsCell.querySelector('tbody');
        let permutationVariation = TableBasePage.createOptionUnselectedProductVariation();
        this.addProductPermutationVariationRow(tbody, permutationVariation);
        this.hookupFieldsProductPermutationVariation();
    }
    updateProductPermutationVariations(element) {
        let variationsCell = element.closest('td.' + flagProductVariations);
        let variationPairsString = this.getProductPermutationVariationsText(variationsCell);
        DOM.setElementAttributeValueCurrent(variationsCell, variationPairsString);
        this.handleChangeNestedElementCellTable(null, variationsCell);
    }
    getProductPermutationVariationsText(variationsTd) {
        let rows = variationsTd.querySelectorAll(':scope tbody tr');
        let variationPairsString = '';
        let ddlVariationType, ddlVariation, idVariationType, idVariation;
        rows.forEach((row, index) => {
            ddlVariationType = row.querySelector(':scope td select.' + flagProductVariationType);
            ddlVariation = row.querySelector(':scope td select.' + flagProductVariation);
            idVariationType = DOM.getElementValueCurrent(ddlVariationType);
            idVariation = DOM.getElementValueCurrent(ddlVariation);
            if (variationPairsString != '') variationPairsString += ',';
            variationPairsString += idVariationType + ':' + idVariation;
        });
        return variationPairsString;
    }
    
    hookupCurrencyFields() {
        this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrency, Utils.getListFromDict(currencies));
    }

    createTdActive(isActive) {
        let tdActive = document.createElement("td");
        tdActive.classList.add(flagActive);
        let buttonActive = document.createElement("button");
        buttonActive.classList.add(flagActive);
        buttonActive.classList.add(isActive ? flagDelete : flagAdd);
        buttonActive.textContent = isActive ? 'x' : '+';
        DOM.setElementAttributesValuesCurrentAndPrevious(buttonActive, isActive);
        tdActive.appendChild(buttonActive);
        return tdActive;
    }
    
    leave() {
        if (this.constructor === TableBasePage) {
            throw new Error("Must implement leave() method.");
        }
        super.leave();
        let formFilters = this.getFormFilters();
        let dataPage = {};
        dataPage[flagFormFilters] = DOM.convertForm2JSON(formFilters);
        this.setLocalStoragePage(dataPage);
        // _rowBlank = null;
    }

    toggleColumnHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
        let table = TableBasePage.getTableMain();
        let columnTh = table.querySelector('th.' + columnFlag);
        let columnThHasFlag = columnTh.classList.contains(classnameFlag);
        if (isRequiredFlag == columnThHasFlag) return;
        DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
        /*
        let columnTds = table.querySelectorAll('td.' + columnFlag);
        columnTds.forEach((columnTd) => {
            DOM.toggleElementHasClassnameFlag(columnTd, isRequiredFlag, classnameFlag);
        });
        */
    }
    toggleColumnHeaderHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
        let table = TableBasePage.getTableMain();
        let columnTh = table.querySelector('th.' + columnFlag);
        DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
    }

    updateAndToggleShowButtonsSaveCancel() {
        let records = this.getTableRecords(true);
        let existsDirtyRecord = records.length > 0;
        this.toggleShowButtonsSaveCancel(existsDirtyRecord);
    }
}


/*  Example of a subclass of TableBasePage 
import { TableBasePage } from "./page_table_base.js";
import API from "../api.js";
import DOM from "../dom.js";

export class PageStoreProductCategories extends TableBasePage {
    static hash = hashPageStoreProductCategories;
    static attrIdRowObject = attrIdProductCategory;
    callSaveTableContent = API.saveCategories;

    constructor() {}
    initialize() {}
    hookupFilters() {}
    loadRowTable(rowJson) {}
    getJsonRow(row) {}
    initialiseRowNew(tbody, row) {}
    hookupTableMain() {}
    isDirtyRow(row) {}
    leave() {}
}
*/