<template>
  <div
    class="alert"
    :class="`alert-${props.type} ${props.small ? 'alert--small' : ''}`"
  >
    <div class="info-line">
      <span class="icon"><component :is="alertIcon" :size="20" /></span>
      <span class="message">
        <slot name="message">
          <strong>{{ message }}</strong>
        </slot>
      </span>
      <slot name="action"></slot>
      <BmsIconButton v-if="dismissable" @click="emits('dismiss')">
        <X :size="20" />
      </BmsIconButton>
    </div>
    <slot name="default"></slot>
  </div>
</template>

<script lang="ts" setup>
import { AlertCircle, AlertTriangle, Info, X } from 'lucide-vue-next';
import BmsIconButton from '../button/BmsIconButton.vue';
import { type Component, ComputedRef, computed } from 'vue';
import { StatusType } from '@/models/status-type.model';

const props = withDefaults(
  defineProps<{
    message?: string;
    dismissable?: boolean;
    type?: StatusType;
    small?: boolean;
  }>(),
  {
    dismissable: true,
    type: StatusType.Information,
    small: false,
  },
);

const emits = defineEmits<{
  (e: 'dismiss'): void;
}>();

const alertIcon: ComputedRef<Component> = computed(() => {
  switch (props.type) {
    case StatusType.Danger:
      return AlertCircle;
    case StatusType.Warning:
      return AlertTriangle;
    default:
      return Info;
  }
});
</script>

<style lang="scss" scoped>
.alert {
  --alert-main-color: light-dark(var(--bms-main-100), var(--bms-main-10));
  --alert-secondary-color: light-dark(var(--bms-main-10), var(--bms-main-100));

  background-color: var(--alert-secondary-color);
  border-radius: 8px;
  border: 1px solid var(--alert-main-color);
  padding: 16px;

  &-information {
    --alert-main-color: light-dark(var(--bms-main-100), var(--bms-main-10));
    --alert-secondary-color: light-dark(
      var(--bms-main-10),
      var(--bms-main-140)
    );
  }

  &-danger {
    --alert-main-color: light-dark(var(--bms-red-100), var(--bms-red-10));
    --alert-secondary-color: light-dark(var(--bms-red-10), var(--bms-red-100));
  }

  &-warning {
    --alert-main-color: light-dark(var(--bms-orange-100), var(--bms-orange-10));
    --alert-secondary-color: light-dark(
      var(--bms-orange-10),
      var(--bms-orange-100)
    );
  }

  &--small {
    padding: 0 16px;
  }

  .info-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: baseline;

    .icon {
      color: var(--alert-main-color);
      display: flex;
    }

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