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

export default class PageDogDogCommandLinks extends TableBasePage {
    static hash = hashPageDogDogCommandLinks;
    static attrIdRowObject = attrIdDogCommandLink;
    callSaveTableContent = API.saveDogCommandLinks;

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

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterDog();
        this.hookupFilterCommandCategory();
        this.hookupFilterCommand();
        this.hookupFilterActive();
    }
    hookupFilterDog() {
        this.hookupFilter(attrIdDog); 
    }
    hookupFilterCommandCategory() {
        this.hookupFilter(attrIdCommandCategory, (event, filterCommandCategory) => {
            // loadDogCommandLinks();
            // let wasDirtyFilter = filterCommandCategory.classList.contains(flagDirty);
            PageDogDogCommandLinks.isDirtyFilter(filterCommandCategory);
            let isDirtyFilter = filterCommandCategory.classList.contains(flagDirty);
            let idCommandCategory = DOM.getElementValueCurrent(filterCommandCategory);
            let commands = filterCommands.filter(command => command[attrIdCommandCategory] == idCommandCategory);
            let filterCommand = document.querySelector(idFormFilters + ' .' + flagCommand);
            let idCommandPrevious = filterCommand.getAttribute(attrValuePrevious);
            filterCommand.innerHTML = '';
            let optionJson, option;
            option = DOM.createOption(null);
            filterCommand.appendChild(option);
            commands.forEach((command) => {
                optionJson = BusinessObjects.getOptionJsonFromObjectJson(command, idCommandPrevious);
                option = DOM.createOption(optionJson);
                filterCommand.appendChild(option);
            });
            filterCommand.dispatchEvent(new Event('change'));
            return isDirtyFilter;
        });
    }
    hookupFilterCommand() {
        this.hookupFilter(attrIdCommand);
    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
        if (_verbose) { console.log("applying data row: ", rowJson); }
        /*
        let tableMain = TableBasePage.getTableMain();
        let row = _rowBlank.cloneNode(true);
        row.classList.remove(flagRowNew);
        let dllDog = row.querySelector('td.' + flagDog + ' select');
        dllDog.value = rowJson[attrIdDog];
        let ddlCommand = row.querySelector('td.' + flagCommand + ' select');
        let optionJson, option;
        listCommands.forEach(function(command) {
            if (command[attrIdDog] != rowJson[attrIdDog]) return;
            optionJson = BusinessObjects.getOptionJsonFromObjectJson(command);
            option = DOM.createOption(optionJson, rowJson[attrIdCommand]);
            ddlCommand.appendChild(option);
        });
        ddlCommand.value = rowJson[attrIdCommand];
        row.querySelector('td.' + flagCommandVariations + ' textarea').value = rowJson[flagCommandVariations];
        let tdCommandVariations = row.querySelector('td.' + flagCommandVariations);
        let textareaCommandVariations = tdCommandVariations.querySelector('textarea');
        DOM.setElementValuesCurrentAndPrevious(textareaCommandVariations, rowJson[flagCommandVariations]);
        let thCommandVariations = row.querySelector('td.' + flagCommandVariations);
        if (!thCommandVariations.classList.contains(flagCollapsed)) tdCommandVariations.classList.remove(flagCollapsed);
        let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
        DOM.setElementValuesCurrentAndPrevious(inputDescription, rowJson[flagDescription]);
        let inputCostLocal = row.querySelector('td.' + flagCostLocal + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputCostLocal, rowJson[flagCostLocal]);
        let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
        DOM.setElementAttributesValuesCurrentAndPrevious(tdCurrencyCost, rowJson[flagCurrencyCost]);
        let ddlCurrencyCost = tdCurrencyCost.querySelector('select');
        DOM.setElementValuesCurrentAndPrevious(ddlCurrencyCost, rowJson[flagCurrencyCost]);
        let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputProfitLocalMin, rowJson[flagProfitLocalMin]);
        let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufacture]);
        let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityStock, rowJson[flagQuantityStock]);
        let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityMin, rowJson[flagQuantityMin]);
        let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityMax, rowJson[flagQuantityMax]);
        let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
        DOM.setElementValuesCurrentAndPrevious(inputQuantityStep, rowJson[flagCountUnitMeasurementPerQuantityStep]);



        row.querySelector('td.' + flagQuantityStock + ' input').value = rowJson[flagQuantityStock];
        row.querySelector('td.' + flagQuantityMin + ' input').value = rowJson[flagQuantityMin];
        row.querySelector('td.' + flagQuantityMax + ' input').value = rowJson[flagQuantityMax];
        row.querySelector('td.' + flagCostLocal).innerHTML = rowJson[flagCostLocal];
        row.setAttribute(attrIdDog, rowJson[flagDog]);
        row.setAttribute(attrIdCommand, rowJson[flagCommand]);
        row.setAttribute(attrIdDogCommandLink, rowJson[attrIdDogCommandLink]);
        let tbody = tableMain.querySelector('tbody');
        tbody.appendChild(row);
        */
    }
    getJsonRow(row) {
        if (row == null) return;
        let tdDog = row.querySelector('td.' + flagDog);
        let tdCommand = row.querySelector('td.' + flagCommand);
        let inputHandSignalDescription = row.querySelector('td.' + flagHandSignalDescription + ' textarea');
        let inputNotes = row.querySelector('td.' + flagNotes + ' textarea');
        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);

        let jsonRow = {};
        jsonRow[attrIdDogCommandLink] = row.getAttribute(attrIdDogCommandLink);
        jsonRow[attrIdDog] = tdDog.getAttribute(attrValueCurrent);
        jsonRow[attrIdCommand] = tdCommand.getAttribute(attrValueCurrent);
        jsonRow[flagHandSignalDescription] = inputHandSignalDescription.getAttribute(attrValueCurrent);
        jsonRow[flagNotes] = inputNotes.getAttribute(attrValueCurrent);
        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
        return jsonRow;
    }
    initialiseRowNew(tbody, row) {
        /*
        this.initialiseRowNewDdlsDog(row);
        this.initialiseRowNewDdlsCommandCategory(row);
        this.initialiseRowNewDdlsCommand(row);
        this.initialiseRowNewDdlsDogAndCommand(row);
        let checkboxIsSubscription = row.querySelector('td.' + flagIsSubscription + ' input');
        let checkboxDoesExpireFasterOnceUnsealed = row.querySelector('td.' + flagDoesExpireFasterOnceUnsealed + ' input');
        this.handleChangeCheckboxDoesExpireFasterOnceUnsealed(null, checkboxDoesExpireFasterOnceUnsealed);
        this.handleChangeCheckboxIsSubscription(null, checkboxIsSubscription);
        */
    }
    initialiseRowNewDdlsDog(row) {
        let ddlDogFilter = document.querySelector(idFormFilters + ' #' + attrIdDog);
        let idDogFilter = DOM.getElementValueCurrent(ddlDogFilter);
        let hasDogFilter = !(Validation.isEmpty(idDogFilter) || idDogFilter == '0');
        if (_verbose) { 
            console.log("initialiseRowNew: ", row);
            console.log({ ddlDogFilter, idDogFilter, hasDogFilter }); 
        }
        if (!hasDogFilter) return;
        let ddlDog = row.querySelector('td.' + flagDog + ' select');
        DOM.setElementValuesCurrentAndPrevious(ddlDog, idDogFilter);
        this.handleChangeDogDdl(null, ddlDog);
    }
    initialiseRowNewDdlsCommandCategory(row) {
        let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
        let hasCommandCategoryFilter = this.getHasCommandCategoryFilter();
        if (_verbose) { 
            console.log("initialiseRowNew: ", row);
            console.log({ddlDogFilter, idDogFilter, hasDogFilter, idCommandCategoryFilter, hasCommandCategoryFilter}); 
        }
        if (!hasCommandCategoryFilter) return;
        let ddlCommandCategory = row.querySelector('td.' + flagCommandCategory + ' select');
        DOM.setElementValuesCurrentAndPrevious(ddlCommandCategory, idCommandCategoryFilter);
    }
    initialiseRowNewDdlsCommand(row) {
        let idCommandFilter = this.getIdCommandFilter();
        let hasCommandFilter = this.getHasCommandFilter();
        if (_verbose) { 
            console.log("initialiseRowNew: ", row);
            console.log({ddlDogFilter, idDogFilter, hasDogFilter, ddlCommandFilter, idCommandFilter, hasCommandFilter}); 
        }
        if (!hasCommandFilter) return;
        let ddlCommand = row.querySelector('td.' + flagCommand + ' select');
        DOM.setElementValuesCurrentAndPrevious(ddlCommand, idCommandFilter);
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
        let newestRow = newRows[newRows.length - 1];
        let clickableElementsSelector = [
            'td.' + flagDog + ' div.' + flagDog
            , ',td.' + flagCommandCategory + ' div.' + flagCommandCategory
            , ',td.' + flagCommand + ' div.' + flagCommand
        ].join('');
        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
            clickableElement.click();
        });
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupFieldsDog();
        this.hookupFieldsCommandCategory();
        this.hookupFieldsCommand();
        this.hookupTextareasHandSignalDescription();
        this.hookupTextareasNotes();
        this.hookupFieldsActive();
    }
    hookupTextareasHandSignalDescription() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagHandSignalDescription + ' textarea');
    }
    hookupTextareasNotes() {
        this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNotes + ' textarea');
    }

    leave() {
        super.leave();
    }
}