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

export default class PageDogCommands extends TableBasePage {
    static hash = hashPageDogCommands;
    static attrIdRowObject = attrIdCommand;
    callSaveTableContent = API.saveCommands;

    constructor(router) {
        super(router);
        this.dogMixin = new DogTableMixinPage(this);
    }

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterDog();
        this.hookupFilterIsNotEmpty();
        this.hookupFilterActive();
    }
    hookupFilterDog() {
        this.hookupFilter(flagDog);
    }

    loadRowTable(rowJson) {
        return;
        if (rowJson == null) return;
        let row = _rowBlank.cloneNode(true);
        row.classList.remove(flagRowNew);
        row.classList.remove(flagInitialised);
        row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
            element.classList.remove(flagInitialised);
        });
        let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
        let tdDog = row.querySelector('td.' + flagDog);
        let divDog = tdDog.querySelector('div.' + flagDog);
        let textareaName = row.querySelector('td.' + flagName + ' textarea');
        let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
        let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
        let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');

        DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
        DOM.setElementValuesCurrentAndPrevious(textareaCode, rowJson[flagCode]);
        DOM.setElementValuesCurrentAndPrevious(textareaName, rowJson[flagName]);
        DOM.setElementValuesCurrentAndPrevious(textareaDescription, rowJson[flagDescription]);
        tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
        tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
        divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
        DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
        divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
        DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
        row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
        
        let table = TableBasePage.getTableMain();
        let bodyTable = table.querySelector('tbody');
        bodyTable.appendChild(row);
    }
    getJsonRow(row) {
        if (row == null) return;
        let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
        let tdDog = row.querySelector('td.' + flagDog);
        let textareaName = row.querySelector('td.' + flagName + ' textarea');
        // let tdCommandVariations = row.querySelector('td.' + flagCommandVariations);
        let inputHasVariations = row.querySelector('td.' + flagHasVariations + ' input[type="checkbox"]');
        let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
        let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');

        let jsonCommand = {};
        jsonCommand[attrIdCommand] = row.getAttribute(attrIdCommand);
        jsonCommand[attrIdDog] = DOM.getElementAttributeValueCurrent(tdDog);
        jsonCommand[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
        // jsonRow[flagCommandVariations] = DOM.getElementAttributeValueCurrent(tdCommandVariations);
        // jsonRow[flagHasVariations] = jsonRow[flagCommandVariations] != '';
        jsonCommand[flagHasVariations] = DOM.getElementAttributeValueCurrent(inputHasVariations);
        // jsonCommand[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
        jsonCommand[attrIdAccessLevel] = DOM.getElementAttributeValueCurrent(tdAccessLevel);
        jsonCommand[flagActive] = buttonActive.classList.contains(flagDelete);
        jsonCommand[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
        return jsonCommand;
    }
    initialiseRowNew(tbody, row) {
        if (row == null) return;
        this.initialiseSliderDisplayOrderRowNew(tbody, row);
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupSlidersDisplayOrderTable();
        this.hookupTdsDog();
        this.hookupTextareasNameTable();
        this.hookupInputsHasVariationsTable();
        this.hookupTdsAccessLevel();
        this.hookupFieldsActive();
    }
    hookupTdsDog() {
        let cellSelector = idTableMain + ' tbody td.' + flagDog;
        this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(filterDogs));
    }
    hookupInputsHasVariationsTable() {
        let cellSelector = idTableMain + ' tbody td.' + flagHasVariations + ' input[type="checkbox"]';
        this.hookupChangeHandlerTableCells(cellSelector);
    }
    
    /*
    isDirtyRow(row) {
        if (row == null) return false;
        console.log("Command Command isDirtyRow");
        console.log("row: ", row);
        let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
        let inputCode = row.querySelector('td.' + flagCode + ' textarea');
        let inputName = row.querySelector('td.' + flagName + ' textarea');
        let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
        let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
        let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
        let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) || 
            inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
        DOM.handleDirtyElement(row, isDirty);
        return isDirty;
    }
    */
    
    leave() {
        super.leave();
    }

    /*
    getFiltersDefaults() {
        filters = {};
        filters.flagIsNotEmpty = true;
        filters.flagActive = true;
        return filters;
    }
    */
}