<template>
    <div
        class="hy-flex-container"
        :class="{ allowBreak }"
        :style="{
            flexWrap: wrap ? 'wrap' : 'no-wrap',
            justifyContent: justify,
            alignItems: verticalAlign,
            flexDirection: direction,
        }"
    >
        <slot />
    </div>
</template>

<script>
export default {
    name: "HyFlexContainer",
    data() {
        return {};
    },
    props: {
        justify: {
            type: String,
            default: "space-between",
        },
        verticalAlign: {
            type: String,
            default: "center",
        },
        wrap: {
            type: Boolean,
            default: true,
        },
        direction: {
            type: String,
            default: "row",
        },
        allowBreak: {
            type: Boolean,
            default: true,
        },
    },
};
</script>

<style lang="scss">
.hy-flex-container {
    display: flex;
    border-spacing: 2px;
    margin: var(--hy-element-margin);
    gap: var(--hy-flex-gap);

    & > * {
        margin: 0 !important;
        flex: 1;
        width: 100%;
        min-width: max-content; // TODO: Problem with minimum input width
    }
}

@media only screen and (max-width: 799px) {
    .hy-flex-container.allowBreak {
        flex-direction: column !important;

        & > * {
            width: 100%;
        }
    }
}
</style>
