/**
 * A FlexContainerComponent, which organizes the children in a row like manner.
 * 
 * @extends FlexContainerComponent
 * @inheritdoc
 */
class Row extends FlexContainerComponent {
    /**
     * 
     * @param {Attr} attr 
     * @param {Modifier} modifier 
     */
    constructor(attr = {}, modifier = null) {
        super(attr, modifier);
        this.addStyleClass("row-component")
        this._flexDirection = "row";
        //this.modifier(new Modifier().fillMaxWidth());
        this.setFlexDirection(false);
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns {Row}
     */
    childContext(innerComponent) {
        function setFloat(comp, side = "right") {
            comp._modifier = new Modifier()
                .setStyleRule("float", side)
                .join(comp._modifier);
        }

        super.childContext(innerComponent);

        for (const child of this._children) {
            onSingleOrArray(
                child,
                (e, i) => setFloat(e, (i === 0 ? "left" : "right"))
            );
        }

        return this;
    }

}