<template>
  <div class="caption" :class="`caption-${computedCaption.mode}`">
    <span class="icon" v-if="computedCaption.mode != StatusType.Default"
      ><alertIcon :size="13"
    /></span>
    <span class="label" v-html="sanitizeHtml(computedCaption.label)" />
  </div>
</template>

<script lang="ts" setup>
import { AlertOctagon, AlertTriangle, CheckCircle } from 'lucide-vue-next';
import { type Component, computed, ComputedRef } from 'vue';
import { type Caption, StatusType } from '@/models';
import { convertStringToCaption } from '@/helpers';
import { sanitizeHtml } from '@/helpers/string.helper';

const props = defineProps<{ caption: string | Caption }>();

const computedCaption: ComputedRef<Caption> = computed(() => {
  let caption: Caption = convertStringToCaption(props.caption);
  if (caption.mode === null) {
    caption.mode = StatusType.Default;
  }
  return caption;
});

const alertIcon: ComputedRef<Component> = computed(() => {
  const mode = computedCaption.value.mode || StatusType.Default;
  switch (mode) {
    case StatusType.Danger:
      return AlertOctagon;
    case StatusType.Warning:
      return AlertTriangle;
    case StatusType.Success:
      return CheckCircle;
    default:
      return CheckCircle;
  }
});
</script>

<style lang="scss" scoped>
.caption {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  cursor: default;
  font-size: 14px;
  color: var(--bms-grey-75);

  :deep(*) {
    color: var(--bms-grey-75);
  }

  &-success {
    color: var(--bms-success-color);

    :deep(*) {
      color: var(--bms-success-color);
    }
  }

  &-danger {
    color: var(--bms-danger-color);

    :deep(*) {
      color: var(--bms-danger-color);
    }
  }

  &-warning {
    color: var(--bms-warning-color);

    :deep(*) {
      color: var(--bms-warning-color);
    }
  }

  .icon {
    margin-right: 5px;
  }

  .label {
    flex-grow: 1;
    align-self: center;
  }
}
</style>
