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 PageDogCommandButtonLinks extends TableBasePage {
    static hash = hashPageDogCommandButtonLinks;
    static attrIdRowObject = attrIdCommandButtonLink;
    callSaveTableContent = API.saveCommandButtonLinks;

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

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterCommandCategory();
        this.hookupFilterCommand();
        this.hookupFilterButtonShape();
        this.hookupFilterColour();
        this.hookupFilterButtonIcon();
        this.hookupFilterLocation();
        this.hookupFilterActive();
    }
    hookupFilterButtonShape() {
        this.hookupFilter(attrIdButtonShape);
    }
    hookupFilterColour() {
        this.hookupFilter(attrIdColour);
    }
    hookupFilterButtonIcon() {
        this.hookupFilter(attrIdButtonIcon);
    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
    }
    getJsonRow(row) {
        if (row == null) return;
        let inputHandSignalDescription = row.querySelector('td.' + flagHandSignalDescription + ' textarea');
        let inputNotes = row.querySelector('td.' + flagNotes + ' textarea');
        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);

        let jsonRow = {};
        jsonRow[attrIdCommandButtonLink] = row.getAttribute(attrIdCommandButtonLink);
        jsonRow[attrIdDog] = this.getIdDogRow(row);
        jsonRow[attrIdCommand] = this.getIdCommandRow(row);
        jsonRow[flagHandSignalDescription] = DOM.getElementAttributeValueCurrent(inputHandSignalDescription);
        jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
        return jsonRow;
    }
    initialiseRowNew(tbody, row) {
        
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
        let newestRow = newRows[0];
        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.hookupFieldsCommandCategory();
        this.hookupFieldsCommand();
        this.hookupFieldsButtonShape();
        this.hookupFieldsColour();
        this.hookupFieldsButtonIcon();
        this.dogMixin.hookupFieldsLocation();
        this.hookupFieldsActive();
    }
    hookupFieldsButtonShape() {
        this.hookupTableCellDdlPreviews(
            flagButtonShape
            , Utils.getListFromDict(filterButtonShapes) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
        );
    }
    hookupFieldsColour() {
        this.hookupTableCellDdlPreviews(
            flagColour
            , Utils.getListFromDict(filterColours) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
        );
    }
    hookupFieldsButtonIcon() {
        this.hookupTableCellDdlPreviews(
            flagButtonIcon
            , Utils.getListFromDict(filterButtonIcons) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
        );
    }

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