<template>

    <div class="flash-message" v-bind:data-type="messageType">
        <span v-if="!withoutIcon" class="flash-message__icon">
            <svg class="flash-message__icon-img">
                <use :href="icon"></use>
            </svg>
        </span>
        <span class="flash-message__text">
           <template v-for="(line, index) in lines">
                <span v-html="line"></span><br v-if="index <= lines.length"/>
           </template>
        </span>

        <svg v-if="withClose" class="flash-message__close">
            <use href="/img/icon-close.svg#close"></use>
        </svg>
    </div>

</template>

<script>
import {computed} from "vue";

export default {
    name: "FlashMessage",

    props: {
        messageType: {
            type: String,
            default: 'action',
        },
        lines: {
          type: Array,
          required: true,
        },
        withoutIcon: {
            type: Boolean,
            default: false,
        },

        withClose: {
            type: Boolean,
            default: false,
        },

        iconName: {
            type: String,
        }
    },

    setup(props) {

        const icon = computed(() => {

            if(props.iconName !== undefined) return '/img/icon-' + props.iconName + '.svg#' + props.iconName;

            switch (props.messageType) {

                case 'warning':
                    return '/img/icon-warning.svg#warning';

                case 'error':
                    return '/img/icon-cross--circle.svg#cross--circle';

                case 'success':
                    return '/img/icon-check--circle.svg#check--circle';

                default:
                case 'action':
                  return '/img/icon-info.svg#info';
            }

        });

        return {
            icon
        }

    }
}
</script>