<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
export default {
    props: {
        cover: {
            type: Object | String,
            default: undefined
        },
        size: {
            type: Number | String,
            default: 50
        }
    },
    computed: {
        isCoverAvailable() {
            return !!this.cover;
        }
    },
    render(createElement, context) {
        let style = {
            'height': '100px',
            'background-color': '#ddd',
            'background-size': 'cover',
            'background-position': 'center center'
        }

        if(typeof this.size !== 'undefined') {
            if(typeof this.size === 'number') {
                style.height = this.size+'px';
            }

            if(typeof this.size === 'string') {
                style.height = this.size;
            }
        }

        if(this.isCoverAvailable) {
            if(typeof this.cover.large !== 'undefined') {
                style['background-image'] = 'url("'+this.$nuxt.$config.apiUrl + '/' + this.cover.path + this.cover.large+'")';
            } else if(typeof this.cover.original !== 'undefined') {
                style['background-image'] = 'url("'+this.$nuxt.$config.apiUrl + '/' + this.cover.path + this.cover.original+'")';
            } else {
                style['background-image'] =  'url("'+this.cover+'")';
            }
        }

        return createElement('div', {
            style: style
        })
    }
}
</script>
