<template>
    <component
        :is="tag"
        :class="className"
        :style="{
            gap: cssEmFallback(gap),
        }"
    >
        <slot />
    </component>
</template>

<script>
const alignments = ['start', 'center', 'end', 'stretch', 'around', 'between', 'baseline'];

export default {
    name: 'px-flex',
    props: {
        /** The element type to use for the component's primary container. */
        tag: { type: String, default: 'div' },

        /** If true, sets display to inline-flex (otherwise flex). */
        inline: { type: Boolean, default: false },

        /** If true, sets flex-direction to column (or column-reverse if reverse is true). */
        vertical: { type: Boolean, default: false },

        /** Equivalent to the flex-wrap css property. */
        reverse: { type: Boolean, default: false },

        /** Equivalent to the flex-wrap css property. */
        wrap: { type: Boolean, default: false },

        /** Equivalent to the align-items css property (aligns items relative to each other). */
        align: { type: String, default: 'start', validator: val => alignments.includes(val) },

        /** Maps to the justify-content css property (justifies the content within the container). */
        justify: { type: String, default: 'start', validator: val => alignments.includes(val) },

        /** Maps to the flex-gap css property (justifies the content within the container). */
        gap: { type: [Number, String], default: null },
    },

    computed: {
        className() {
            let c = 'px-flex';

            if (this.reverse) {
                c = 'px-flex-row-reverse';
            }

            if (this.vertical) {
                c = 'px-flex-column';
                if (this.reverse) {
                    c = 'px-flex-column-reverse';
                }
            }

            if (this.inline) {
                c += ' px-flex-inline';
            }

            if (this.wrap) {
                c += ' px-flex-wrap';
            }

            // align-justify
            c += ` px-flex-items-${this.align} px-flex-justify-${this.justify}`;

            return c;
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
@use '@thinkpixellab-public/px-styles/src/modules/atoms' as atoms;

// generate the atoms classes with px-flex as a prefix
@include atoms.atoms-flex(px-flex);

.px-flex,
.px-flex-row-reverse,
.px-flex-column,
.px-flex-column-reverse {
    --gap-sp: 1rem;
}
</style>
