<template>
    <picture
        class="c2-image" 
        :style="cssVars"
    >
        <source 
            v-if="mobileSrc" 
            :srcset="mobileSrc" 
            :media="`(max-width: ${this.mediaBreakpoint}`"
        >
        <img
            :src="src"
            :alt="alt"
            :loading="lazyLoadOption"
            :height="height"
            :width="width"
            :class="imageClasses"
        />
    </picture>
</template>

<script>

    export default { 
        name: 'C2Image',
        props: {
            dontLazyLoad: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number,
                default: null
            },
            width: {
                type: Number,
                default: null
            },
            aspectRatio: {
                type: String,
                default: '16/9'
            },
            aspectRatioMobile: {
                type: String,
                default: null
            },
            alt: {
                type: String,
                required: true
            },
            src: {
                type: String,
                required: true
            },
            mobileSrc: {
                type: String,
                default: null
            },
            imageClasses: {
                type: String,
                default: null
            },
            imageFit: {
                type: String,
                default: 'cover'
            },
            mediaBreakpoint: {
                type: String,
                default: '640px'
            }
        },
        data() {
            return {
                isMobile: null,
                currentAspectRatio: this.aspectRatio,
                lazyLoadOption: this.dontLazyLoad ? 'auto' : 'lazy'
            }
        },
        computed: {
            cssVars () {
                return {
                    '--c2ImageAspectRatio': this.currentAspectRatio,
                    '--c2ImageObjectFit': this.imageFit
                }
            }
        },
        created () {
            if (this.mobileSrc) {
                this.checkForMobile();

                window.addEventListener('resize', () => {
                    this.checkForMobile();
                });
            }

            if (this.mobileSrc && !this.aspectRatioMobile) {
                this.aspectRatioMobile = this.aspectRatio
            }
        },
        methods: {
            checkForMobile () {
                if (window.matchMedia(`(max-width: ${this.mediaBreakpoint}`).matches) {
                    this.currentAspectRatio = this.aspectRatioMobile;
                } else {
                    this.currentAspectRatio = this.aspectRatio;
                }
            }
        },
    }
</script>

<style lang="scss">

    .c2-image {
        display: flex;
        aspect-ratio:  var(--c2ImageAspectRatio);

        img {
            width: 100%;
            height: 100%;
            object-fit:  var(--c2ImageObjectFit);
        }
    }
</style>
