/**
 * @inheritdoc
 * @abstract
 * @extends ModifiableComponent
 */
class StyleAndScriptStoringComponent extends ModifiableComponent {
    /**
     * @type {ExtStorage}
     */
    _styleClassesExtStore
    /**
     * @type {boolean}
     */
    _isClassESDefault;
    /**
     * @type {ExtStorage}
     */
    _stylesExtStore;
    /**
     * @type {boolean}
     */
    _isStyleESDefault;
    /**
     * @type {Array<SStoreDefinition>}
     */
    _styles;
    /**
     * @type {ExtStorage}
     */
    _functionsExtStore;
    /**
     * @type {boolean}
     */
    _isFunESDefault;
    /**
     * @type {Array<SStoreDefinition>}
     */
    _functions;

    /**
     * 
     * @param {HTMLElement} element 
     * @param {Map<string,string>} attr 
     */
    constructor(element, attr = {}) {
        super(element, attr);

        this._isClassESDefault = true;
        this._isStyleESDefault = true;
        this._styles = [];
        this._isFunESDefault = true;
        this._functions = [];
    }


    /**
     * @todo: Unify logic extract modifications into responsible construct
     * @todo: Make it work as expected, fix docu
     * @todo: Differentiate between directions (horizontal, vertiacl)
     * @override
     * @inheritdoc
     * Sets the alignment (modifications) for this element. 
     * @param {Alignment} alignment 
     * @returns {Component} this component object
     */
    alignment(alignment) {
        /*
        this._modifier._modifications["display"] = "flex";
        this._modifier._modifications["align-content"] = alignment;
        this._modifier._modifications["align-items"] = alignment;
        this._modifier._modifications["text-align"] = alignment;
        */
        this._alignment = alignment;
        this._modifier._modifications["align-content"] = this._alignment;
        this._modifier._modifications["align-items"] = this._alignment;
        this._modifier._modifications["text-align"] = this._alignment;
        return this;
    }

    /**
     * @todo: Unify logic extract modifications into responsible construct
     * @todo: Differentiate between directions (horizontal, vertical)
     * @todo: Make it work as expected, fix docu
     * @override
     * @inheritdoc
     * Sets the arrangement (modifications) for this element or more specific for its children. 
     * Therefore it defines the space distribution to the children.
     * @param {Arrangement} arrangement 
     * @returns {Component} this component object
     */
    arrangement(arrangement) {
        /*
        this._modifier._modifications["justify-content"] = arrangement;
        */
        this._arrangement = arrangement;
        this._modifier._modifications["justify-content"] = this._arrangement;
        return this;
    }

    /**
     * Defines/Sets the general "storage-behaviour" for styling of this component.
     * Further for potential css definitions.
     * If a styling/modifier/class is passed via the corresponding methods/way, 
     * an alternative behaviour can be passed as a parameter - which will only be applied on/for that single one.
     * 
     * @param {ExtStorage|ExtStoreType|OverwriteBehaviour} extStore 
     * @returns {Component}
     */
    setStylingsStorage(extStore) {
        if (extStore) {
            if (extStore instanceof ExtStorage) {
                this._stylesExtStore = extStore;
            } else if (extStore instanceof ExtStoreType) {
                this._stylesExtStore.setExtStoreType(extStore);
            } else {
                this._stylesExtStore.OverwriteBehaviour(extStore);
            }
            this._isStyleESDefault = false;
        } else {
            console.log("(Style)ExtStore was empty, did nothing");
        }
        return this;
    }

    /**
     * Defines/Sets the general "storage-behaviour" for functions of this component.
     * If a function is passed via "registerFunction", 
     * an alternative behaviour can be passed as a parameter - which will only be applied on/for that single one.
     * 
     * @param {ExtStorage|ExtStoreType|OverwriteBehaviour} extStore 
     * @returns {Component}
     */
    setFunctionsStorage(extStore) {
        if (extStore) {
            if (extStore instanceof ExtStorage) {
                this._functionsExtStore = extStore;
            } else if (extStore instanceof ExtStoreType) {
                this._functionsExtStore.setExtStoreType(extStore);
            } else {
                this._functionsExtStore.OverwriteBehaviour(extStore);
            }
            this._isFunESDefault = false;
        } else {
            console.log("(Function)ExtStore was empty, did nothing");
        }
        return this;
    }

    /**
    * 
    * @param {Function} func 
    * @param {string} underTheName 
    * @param {ExtStorage|ExtStoreType|ExtStorePosition|OverwriteBehaviour|EXPosConfer|ESOverwriteConfer} extStore 
    * if a unique definition is desired, all constants or configurator objects are allowed - they will be processed accordingly 
    * @returns 
    */
    registerFunction(func, underTheName = "", extStore = null) {

        let registrationName = [
            underTheName.trim(),
            func.name.trim(),
            `func${this._compName}${Object.keys(this._functions).length}`
        ]
            .find(e => e !== '');

        /*
        if (!extStore) {
            extStore = this._functionsExtStore;
        } else if (extStore instanceof ExtStoreConfer) {
            extStore = extStore.ensureStore();
        } else {
            extStore = new ExtStorage().setSingleValueToClone(extStore, this._functionsExtStore);
        }
            */

        let entry = new SStoreDefinition();
        entry._identifier = registrationName;
        entry._definition = func;
        entry._extStore = extStore;

        this._functions.push(entry);

        //identifyAndResolveOverwrite(this._functions, registrationName, entry, extStore._overwriteBehaviour);

        return this;
    }
}