import BusinessObjects from "../lib/business_objects/business_objects.js";
import Events from "../lib/events.js";
import LocalStorage from "../lib/local_storage.js";
import API from "../api.js";
import DOM from "../dom.js";

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

export default class BasePage {
    constructor(router) {
        if (!router) {
            throw new Error("Router is required");
        }
        else {
            if (_verbose) { console.log("initialising with router: ", router); }
        }
        this.router = router;
        this.title = titlePageCurrent;
        // this.hash = hashPageCurrent;
        if (this.constructor === BasePage) {
            throw new Error("Cannot instantiate abstract class");
        }
        
        if (!this.constructor.hash) {
            throw new Error(`Class ${this.constructor.name} must have a static hash attribute.`);
        }
    }

    initialize() {
        throw new Error("Method 'initialize()' must be implemented.");
    }

    sharedInitialize() {
        this.logInitialisation();
        this.hookupCommonElements();
    }

    logInitialisation() {
        if (_verbose) { console.log('Initializing ' + this.title + ' page'); }
    }
    
    hookupCommonElements() {
        // hookupVideos();
        this.hookupLogos();
        this.hookupOverlays();
    }
    
    hookupEventHandler(eventType, selector, callback) {
        Events.initialiseEventHandler(selector, flagInitialised, (element) => {
            element.addEventListener(eventType, (event) => {
                event.stopPropagation();
                callback(event, element);
            });
        });
    }

    hookupLogos() {
        this.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
            if (_verbose) { console.log('clicking logo'); }
            this.router.navigateToHash(hashPageHome);
        });
    }

    hookupOverlays() {
        this.hookupOverlayFromId(idOverlayConfirm);
        this.hookupOverlayFromId(idOverlayError);
    }

    hookupOverlayFromId(idOverlay) {
        Events.initialiseEventHandler(idOverlay, flagInitialised, (overlay) => {
            overlay.querySelector('button.' + flagCancel).addEventListener("click", (event) => {
                event.stopPropagation();
                overlay.style.display = 'none';
            });
        });
    }

    hookupButtonSave() {
        Events.initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, (button) => {
            button.addEventListener("click", (event) => {
                event.stopPropagation();
                if (_verbose) { console.log('saving page: ', this.title); }
                OverlayConfirm.show();
            });
            // button.classList.add(flagCollapsed);
        });
    }

    leave() {
        if (_verbose) { console.log('Leaving ' + this.title + ' page'); }
        if (this.constructor === BasePage) {
            throw new Error("Must implement leave() method.");
        }
    }
    setLocalStoragePage(dataPage) {
        LocalStorage.setLocalStorage(this.hash, dataPage);
    }
    getLocalStoragePage() {
        return LocalStorage.getLocalStorage(this.hash);
    }

    toggleShowButtonsSaveCancel(show) { // , buttonSave = null, buttonCancel = null
        let buttonSave = document.querySelector('form.' + flagFilter + ' button.' + flagSave);
        let buttonCancel = document.querySelector('form.' + flagFilter + ' button.' + flagCancel);
        if (show) {
            buttonCancel.classList.remove(flagCollapsed);
            buttonSave.classList.remove(flagCollapsed);
            if (_verbose) { console.log('showing buttons'); }
        } else {
            buttonCancel.classList.add(flagCollapsed);
            buttonSave.classList.add(flagCollapsed);
            if (_verbose) { console.log('hiding buttons'); }
        }
    }

    static isDirtyFilter(filter) {
        let isDirty = DOM.updateAndCheckIsElementDirty(filter);
        if (isDirty) document.querySelectorAll(idTableMain + ' tbody tr').remove();
        return isDirty;
    }
}