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

const props = withDefaults(defineProps<IVHint>(), {
  title: '',
  icon: false,
  type: '',
  disabled: false,
})

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';
    case 'active': return 'contrast'
    default:
      return 'secondary';
  }
});
</script>

<template>
  <Message
    variant="simple"
    :severity="severity"
    class="p-message"
    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
    :closable="false"
    size="small"
    role="alert"
  >
    {{ props.title }}
    <template #icon v-if="props.icon">
      <i :class="[iconClass]" style="font-size: var(--text-body-SM-detail-text-Regular-size);"></i>
    </template>
  </Message>
</template>

<style scoped>
.p-message.disabled {color: var(--text-disabled-grey);}

.p-message {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 0px;
  gap: var(--p-message-content-gap);
  height: 100%;
}
</style>
