<script setup lang="ts">
import Toast from 'primevue/toast';
import VButton from '../button/VButton.vue';
import type { ToastProps } from 'primevue/toast';
import styles from '@visua/typography.module.css';

const props = withDefaults(defineProps<ToastProps>(), {
  group: undefined,
  position: 'bottom-center',
  breakpoints: undefined
});

const emit = defineEmits([
  'close',
  'life-end'
]);

const getIconColor = (type?: string) => {
  switch (type) {
    case 'error': return 'var(--text-default-error)';
    case 'warn' : return 'var(--text-default-warning)';
    case 'success' : return 'var(--text-default-success)';
    case 'info': return 'var(--text-default-info)';
    default:
      return 'var(--text-default-success)';
  }
};

const getIconClass = (type?: string) => {
  switch (type) {
    case 'error': return 'ri-spam-fill';
    case 'warn' : return 'ri-alert-fill';
    case 'success' : return 'ri-checkbox-circle-fill';
    case 'info': return 'ri-information-fill';
    default:
      return 'ri-information-fill';
  }
};
</script>

<template>
  <Toast
    :position=props.position
    :group="props.group"
    :breakpoints="props.breakpoints"
    class="p-toast"
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    @close="emit('close', $event)"
    @life-end="emit('life-end', $event)"
  >
    <template #container="{message, closeCallback}">
      <div class="header">
        <i
          style="font-size: var(--p-message-icon-lg-size);"
          :class="getIconClass(message.severity)"
          :style="{color: getIconColor(message.severity)}"
        />
        <span
          :class="[styles['text-body-MD-standard-text-Medium']]"
          :style="{color: getIconColor(message.severity)}"
          style="width: 100%;"
        >
          {{ message.summary }}
        </span>
        <VButton
          title="Fermer le message"
          tertiary
          no-outline
          size="sm"
          icon-only
          aria-label="Fermer"
          icon="ri-close-line"
          type="button"
          @click="closeCallback"
          style="height: 2rem;"
        />
      </div>
      <div
        v-if="!!message.detail"
        :class="['content', styles['text-body-MD-standard-text-Regular']]"
      >
        <span>{{ message.detail }}</span>
        <slot name="footer"/>
      </div>
    </template>
  </Toast>
</template>

<style lang="css" scoped>
.header{
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  padding: var(--p-toast-text-gap);
  color: var(--text-title-grey);
  align-items: center;
}

.content{
  padding: 0rem 0.825rem 0.5rem 0.825rem;
  color: var(--text-default-grey);
}
</style>
