/**
 * Represents container Components.
 * Some predefined modifications are applied on the child components.
 */
class FlexContainerComponent extends Component {
    constructor(attr = {}) {
        super(document.createElement("div"), attr)
            .addStyleClass("flex-container-component")
    }

    /**
     * 
     * @param {Component|Array<Component>} innerComponent 
     * @returns this component object
     */
    childComponents(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent.forEach(icomp => {
                (icomp instanceof Component
                    ? icomp
                    : icomp.backToComponent()
                )
                    .chainModifier()
                    .setStyleRule("flex", "none")

            })
        } else if (!innerComponent instanceof Component) {
            innerComponent
                .backToComponent()
                .chainModifier()
                .setStyleRule("flex", "none")
        }
        return super.childComponents(innerComponent);
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a column like manner.
 */
class Column extends FlexContainerComponent {
    constructor(attr = {}) {
        super(document.createElement("div"), attr)
            .addStyleClass("column-component")
            .modifier(
                new Modifier()
                    .fillMaxHeight()
                    .setStyleRule("flex-direction", "column")
            );
    }
}

/**
 * A FlexContainerComponent, which organizes the children in a row like manner.
*/
class Row extends FlexContainerComponent {
    constructor(attr = {}) {
        super(attr)
            .addStyleClass("row-component")
            .modifier(
                new Modifier()
                    .fillMaxWidth()
                    .setStyleRule("flex-direction", "row")
            )
    }

    childComponents(innerComponent) {
        if (innerComponent instanceof Array) {
            innerComponent.forEach((icomp, i) => {
                (icomp instanceof Component
                    ? icomp
                    : icomp.backToComponent()
                ).modifier(
                    /* sets the width for all elements, 
                    to avoid overlapping or line break because of lacking width,
                    a percent is subtracted for every child element  */
                    new Modifier()
                        .setStyleRule("float", (i === 0 ? "left" : "right"))
                        .fillMaxWidth((Math.floor((10000 - 100 * innerComponent.length) / innerComponent.length) / 10000))
                )
            })
        } else {
            innerComponent.modifier(
                new Modifier()
                    .setStyleRule("flex", "none")
            )
        }
        return super.childComponents(innerComponent)
    }
}