<script setup lang="ts">
import type IVMessage from './IVMessage.type';
import Message from 'primevue/message';
import VButton from '../button/VButton.vue';
import { computed } from 'vue';
import styles from '@visua/typography.module.css';

const props = withDefaults(defineProps<IVMessage>(), {
  type: undefined,
  closable: false,
})

const emit = defineEmits(['close']);

const iconClass = computed(() => {
  switch (props.type) {
    case 'alert': return 'ri-spam-fill';
    case 'warning' : return 'ri-alert-fill';
    case 'success' : return 'ri-checkbox-circle-fill';
    case 'info': return 'ri-information-fill';
    default:
      return undefined;
}
});

const severity = computed(() => {
  switch (props.type) {
    case 'alert': return 'error';
    case 'warning' : return 'warn';
    case 'success' : return 'success';
    case 'info' : return 'info';
    default:
      return undefined;
  }
});

const iconColor = computed(() => {
  switch (props.type) {
    case 'alert': return 'var(--text-default-error)';
    case 'warning' : return 'var(--text-default-warning)';
    case 'success' : return 'var(--text-default-success)';
    case 'info': return 'var(--text-default-info)';
    default:
      return 'var(--text-mention-grey)';
  }
});
</script>

<template>
  <Message
    role="alert"
    :closable="props.closable"
    :severity="severity"
    size="large"
    class="p-message"
    @close="emit('close', $event)"
  >
    <template #container="slotProps">
      <div class="container">
        <div class="header">
          <i :class="[iconClass]" :style="{color: iconColor}" style="font-size: var(--p-message-icon-lg-size);"></i>
          <span class="title" :class="[styles['text-body-MD-standard-text-Regular']]" :style="{color: iconColor}">
            {{ props.title }}
          </span>
          <VButton
          v-if="props.closable"
            title="Fermer le message"
            tertiary
            no-outline
            size="sm"
            icon-only
            aria-label="Fermer"
            icon="ri-close-line"
            type="button"
            @click="slotProps.closeCallback"
          />
        </div>
        <div v-if="$slots.content" class="content">
          <slot name="content"/>
        </div>
      </div>
    </template>
  </Message>
</template>

<style lang="css" scoped>
.p-message{
  width: 100%;
  height: fit-content;
  margin: 0px;
}

.container{
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--p-message-content-gap);
}

.header{
  display: flex;
  flex-direction: row;
  gap: var(--p-message-content-gap);
  align-items: baseline;
}

.title{
  width: 100%;
}

.content{
  display: block;
  padding: 0rem 0.825rem 0.5rem 0.825rem;
}
</style>
