<template>
    <input
        v-if="name"
        type="image"
        :name="name"
        :src="url"
        :width="size"
        :height="size"
        v-bind="$attrs"
        v-on="$listeners"
    />
    <img v-else :src="url" :width="size" :height="size" :class="css_class" v-bind="$attrs" v-on="$listeners" />
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'studip-icon',
    props: {
        shape: String,
        role: {
            type: String,
            required: false,
            default: 'clickable',
        },
        size: {
            type: Number,
            required: false,
            default: 16,
        },
        name: {
            type: String,
            required: false,
        }
    },
    computed: {
        url(): string {
            if (this.shape.indexOf('http') === 0) {
                return this.shape;
            }
            var path = this.shape.split('+').reverse().join('/');
            return `${window.STUDIP.ASSETS_URL}images/icons/${this.color}/${path}.svg`;
        },
        color(): string {
            switch (this.role) {
                case 'info':
                    return 'black';

                case 'inactive':
                    return 'grey';

                case 'accept':
                case 'status-green':
                    return 'green';

                case 'attention':
                case 'new':
                case 'status-red':
                    return 'red';

                case 'info_alt':
                    return 'white';

                case 'status-yellow':
                    return 'yellow';

                case 'sort':
                case 'clickable':
                case 'navigation':
                default:
                    return 'blue';
            }
        },
        css_class(): string {
            return 'studipicon ' +  this.$attrs.class; //TODO: is this correct?
        }
    },
});
</script>