<template>
    <div class="c2-image-hero-banner" :class="[imageClass]" :style="cssVars">
        <picture v-if="backgroundImageMobile">
            <source :srcset="backgroundImageMobile"
                    :media="`(max-width: ${mobileMediaBreakpoint})`">
            <img :src="backgroundImage" class="hero-banner-image" alt="hero-banner" />
        </picture>

        <img v-if="!backgroundImageMobile" :src="backgroundImage" class="hero-banner-image" alt="hero-banner" />
        
        <div 
            v-if="backgroundOverlay" 
            :class="contentWrapperClasses"
            class="c2-banner-inner-content"
        >
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'C2ImageHeroBanner',
        props: {
            aspectRatio: {
                type: String,
                default: null
            },
            backgroundImage: {
                type: String,
                required: true
            },
            backgroundOverlay: {
                type: String,
                default: null,
                validator: value => {
                    // must be a valid rgba color
                    const rgbaValidator = /^rgba\((\d{1,3}%?),\s*(\d{1,3}%?),\s*(\d{1,3}%?),\s*(\d*(?:\.\d+)?)\)$/;
                    return !value || rgbaValidator.test(value);
                }
            },
            backgroundImageMobile: {
                type: String,
                required: true
            },
            mobileMediaBreakpoint: {
                type: String,
                default: '420px'
            },
            contentWrapperClasses: {
                type: String,
                default: null
            }
        },
        computed: {
            cssVars () {
                return {
                    '--c2HeroBackgroundImageOverlay': this.backgroundOverlay ? this.backgroundOverlay : 'transparent',
                    '--c2HeroBackgroundAspectRatio': this.aspectRatio
                }
            },
            imageClass () {
                return this.backgroundOverlay ? 'c2-image-overlay' : '';
            }
        }
    }
</script>

<style lang="scss">
    .c2-banner-inner-content {
        z-index: 1;
    }

    .c2-image-hero-banner {
        overflow: hidden;
        position: relative;

        &.c2-image-overlay {
            
            &::after {
                background-color: var(--c2HeroBackgroundImageOverlay);
                bottom: 0;
                content: '';
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
    }

    picture {
        display: flex;
        height: 100%;
        width: 100%;
        aspect-ratio: var(--c2HeroBackgroundAspectRatio);
    }

    .hero-banner-image {
        object-fit: cover;
    }
</style>
