/**
 * This file is part of the jps-like-websites lib
 * URL: https://git.labos.goip.de/chris/jpc-like-websites
 * @copyright by its creator Christian Martin 
 */

/**
 * 
 * @param {map<string,any>} attrs 
 * @param {Object} intoContainer 
 * @param {Function<string, any, Object>} cb 
 * @returns {Object} the filled container
 */
function fillAttrsInContainerByCb(attrs, intoContainer, cb) {
    let keys = Object.keys(attrs);
    for (let i = 0; i < keys.length; i++) {
        cb(keys[i], attrs[keys[i]], intoContainer);
    }
    return intoContainer;
}


/**
 * @extends ChildbearerComponent
 * @abstract
 */
class ModifiableComponent extends ChildbearerComponent {
    _modifier;

    constructor(element, attr = {}) {
        super(element, attr);
    }

    /**
     * Sets, updates or overwrites the Modifier-Object for this component
     * @param {Modifier} modifier 
     * @returns {Componant} this component object
     */
    modifier(modifier) {
        this._modifier = this._modifier
            .join(modifier.ensureModifier());
        return this;
    }

    /**
     * Returns a Modifier to chain modifications 
     * instead of setting them within an sepperate context.
     * @returns {ChainableModifier} 
     */
    chainModifier() {
        return new ChainableModifier(this);
    }

    /**
     * @inheritdoc
     * @override
     * @param {Component|ChainableModifier|} component 
     */
    #appendChildComponent(component) {
        this._element.append(
            (component instanceof Component
                ? component
                : component.toComponent()
            )
                .generate()
        );
    }

    /**
     * @inheritdoc
     * @override 
     * @returns {HTMLElement}
     */
    generate() {
        this._modifier._modifications["justify-content"] = this._arrangement;
        this._modifier._modifications['display'] = "flex";
        this._modifier._modifications["align-content"] = this._alignment;
        this._modifier._modifications["align-items"] = this._alignment;
        this._modifier._modifications["text-align"] = this._alignment;

        fillAttrsInContainerByCb(
            this._modifier._modifications,
            this._element,
            (key, val, el) => { el.style[key] = val; }
        );

        return this._element;
    }
}