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

export default class PageUsers extends TableBasePage {
    static hash = hashPageUserAccounts;
    static attrIdRowObject = attrIdUser;
    callSaveTableContent = API.saveUsers;

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

    initialize() {
        this.sharedInitialize();
    }

    hookupFilters() {
        this.sharedHookupFilters();
        this.hookupFilterCompany();
        this.hookupFilterActive();
    }
    hookupFilterCompany() {
        this.hookupFilter(attrIdCompany); 
    }

    loadRowTable(rowJson) {
        if (rowJson == null) return;
        if (_verbose) { Utils.consoleLogIfNotProductionEnvironment("applying data row: ", rowJson); }
    }
    getJsonRow(row) {
        if (row == null) return;
        // let tdCompany = row.querySelector('td.' + flagCompany);
        let inputRole = row.querySelector('td.' + flagRole + ' .' + flagRole);
        let inputFirstname = row.querySelector('td.' + flagFirstname + ' .' + flagFirstname);
        let inputSurname = row.querySelector('td.' + flagSurname + ' .' + flagSurname);
        let inputNotes = row.querySelector('td.' + flagNotes + ' .' + flagNotes);
        let buttonActive = row.querySelector('td.' + flagActive + ' .' + flagActive);

        let jsonRow = {
            [attrIdUserAuth0]: null
            , [flagEmail]: null
            , [flagIsEmailVerified]: null
            , [attrIdCompany]: company[attrIdCompany]
            , [flagIsSuperUser]: null
            , [flagCanAdminDog]: null
            , [flagCanAdminUser]: null
            , [flagCompany]: null
            , [flagRole]: null
        };
        jsonRow[attrIdUser] = row.getAttribute(attrIdUser);
        // jsonRow[attrIdCompany] = tdCompany.getAttribute(attrIdCompany);
        jsonRow[attrIdRole] = DOM.getElementAttributeValueCurrent(inputRole);
        jsonRow[flagFirstname] = DOM.getElementAttributeValueCurrent(inputFirstname);
        jsonRow[flagSurname] = DOM.getElementAttributeValueCurrent(inputSurname);
        jsonRow[flagNotes] = DOM.getElementAttributeValueCurrent(inputNotes);
        jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);

        console.log("jsonRow");
        console.log(jsonRow);

        return jsonRow;
    }
    
    initialiseRowNew(tbody, row) {
        
    }
    postInitialiseRowNewCallback(tbody) {
        let newRows = tbody.querySelectorAll('tr.' + flagRowNew);
        let newestRow = newRows[0];
        let clickableElementsSelector = [
            'td.' + flagRole + ' div.' + flagRole
        ].join('');
        newestRow.querySelectorAll(clickableElementsSelector).forEach((clickableElement) => {
            clickableElement.click();
        });
    }

    hookupTableMain() {
        super.hookupTableMain();
        this.hookupFieldsRole();
        this.hookupFieldsFirstname();
        this.hookupFieldsSurname();
        this.hookupFieldsNotesTable();
        this.hookupFieldsActive();
    }
    hookupFieldsRole() {
        this.hookupTableCellDdlPreviews(
            flagRole
            , Utils.getListFromDict(filterRoles) // .sort((a, b) => a[flagName].localeCompare(b[flagName]))
        );
    }
    hookupFieldsFirstname() {
        this.hookupChangeHandlerTableCells(flagFirstname);
    }
    hookupFieldsSurname() {
        this.hookupChangeHandlerTableCells(flagSurname);
    }

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