<template>
    <section
        class="c2-hero-banner"
        :class="[
            {
                [`${maxHeightClass}`]: contentPositionBelow
            }
        ]"
    >
        <component
            :is="heroType"
            :class="[
                {
                    [`${maxHeightClass}`]: contentPositionInside
                },
                className
            ]"
            :background-image="backgroundImage"
            :background-image-mobile="backgroundImageMobile"
            :background-color="backgroundColor"
            :content-wrapper-classes="contentWrapperClasses"
            :mobile-media-breakpoint="mobileMediaBreakpoint"
            :style="cssVars"
            :background-overlay="backgroundOverlay"
            :aspect-ratio="aspectRatio"
        >
            <slot v-if="contentPositionInside" />
        </component>
        
        <div
            v-if="contentPositionBelow"
            :class="contentWrapperClasses"
            class="c2-hero-content"
        >
            <slot />
        </div>
    </section>
</template>

<script>
    import C2ImageHeroBanner from './_c2-image-hero-banner.vue';
    import C2BackgroundColorHeroBanner from './_c2-background-color-hero-banner.vue';

    export default {
        name: 'C2HeroBanner',
        components: {
            C2BackgroundColorHeroBanner,
            C2ImageHeroBanner
        },
        props: {
            aspectRatio: {
                type: String,
                default: '16/9'
            },
            backgroundImage: {
                type: String,
                default: null
            },
            backgroundImageMobile: {
                type: String,
                default: null
            },
            backgroundColor: {
                type: String,
                default: null
            },
            backgroundOverlay: {
                type: String,
                default: null
            },
            contentPosition: {
                type: String,
                default: 'inside',
                validator: value => {
                    return value === 'inside' ||
                           value === 'below';
                }
            },
            maxHeight: {
                type: String,
                default: null,
                validator: value => {
                    // must be a positive number with a unit of measure following
                    const pxRegExValidator = /\d+(px|rem|em|%)/i;
                    return !value || pxRegExValidator.test(value);
                }
            },
            mobileMediaBreakpoint: {
                type: String,
                default: '420px'
            },
            contentWrapperClasses: {
                type: String,
                default: null
            }
        },
        computed: {
            className () {
                return this.contentPosition === 'inside' ? 'c2-hero-banner' : '';
            },
            cssVars () {
                return {
                    '--c2HeroMaxHeight': this.maxHeight
                };
            },
            maxHeightClass () {
                return this.maxHeight ? 'c2-hero-max-height' : '';
            },
            contentPositionBelow () {
                return this.contentPosition === 'below';
            },
            contentPositionInside () {
                return this.contentPosition === 'inside';
            },
            heroType () {
                return this.backgroundImage ? 'c2-image-hero-banner' : 'c2-background-color-hero-banner';
            }
        }
    }
</script>

<style lang="scss">
    .c2-hero-banner {
        box-sizing: border-box;
        overflow: auto;

        &.c2-hero-max-height {
            max-height: var(--c2HeroMaxHeight);
        }
    }

    .c2-hero-content {
        box-sizing: border-box;
        overflow: auto;
    }
</style>
