<template>
  <transition :name="transitionName">
    <div
      v-show="openState"
      :class="variantClasses"
      class="px-4 py-3 shadow-md relative w-full ais-alert"
      role="alert"
    >
      <div v-show="dismissible" class="absolute top-2 right-2.5">
        <BaseButton @click="openState=false">
          <AisIcon icon="close" :aria-label="dismissLabel"></AisIcon>
        </BaseButton>
      </div>
      <div class="flex gap-3 flex-no-wrap align-baseline">
        <slot name="icon" :icon="variantIcon" :hasIcon="hasIcon">
          <AisIcon v-if="hasIcon" :icon="variantIcon" :class="{'text-lg': hasTitle }" />
        </slot>
        <div class="grid gap-y-1 text-left">
          <div v-if="hasTitle || $slots.title">
            <slot name="title" :title="props.title" :hasTitle="hasTitle">
              <div class="text-lg font-serif font-bold">
                  {{ props.title }}
              </div>
            </slot>
          </div>

          <div v-if="$slots.default" class="font-normal">
            <slot :icon="variantIcon" :hasIcon="hasIcon" :hasTitle="hasTitle" />
          </div>

          <slot name="details" :details="details" :hasDetails="hasDetails">
            <ul v-if="hasDetails" class="mr-4 list-disc list-inside pl-1 my-0">
              <li v-for="item in details" :key="item" class="leading-normal">{{ item }}</li>
            </ul>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import AisIcon from '../icon/AisIcon.vue';
import BaseButton from '../button/BaseButton.vue';
import { expectedValues } from '@/util/prop-validators';
import { iconProps } from '../icon/ais-icons';
import {CoreIcons, Variants} from "../../util/BaseType";

interface Props {
  variant?: Variants
  modelValue: boolean
  title?: string
  dismissible?: boolean
  dismissLabel?: string
  details?: string[]
  icon?: CoreIcons
  transition: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: "default",
  modelValue: true,
  dismissible: false,
  dismissLabel: () => 'Close',
  transition: true,
  icon: undefined,
  details: () => []
});


// const props = defineProps({
//   /**
//    * Applies one of the theme color variants to the component.
//    */
//   variant: {
//     type: String,
//     default: () => 'default',
//     validator: expectedValues(
//       'default', 'primary', 'secondary',
//       'info', 'success', 'warning', 'danger'
//     )
//   },
//
//   // v-model controls the visibility of the alert
//   modelValue: { type: Boolean, default: true },
//
//   // Bold text that appears at the top of the alert
//   title: { type: String, required: false },
//
//   /**
//    * When set, enables the dismiss close button
//    */
//   dismissible: { type: Boolean, default: false },
//
//   /**
//    * Value for the 'aria-label' attribute on the dismiss button
//    */
//   dismissLabel: { type: String, default: () => 'Close' },
//
//   /**
//  * Array of strings that will appear as a bulleted list below the main message.
//  */
//   details: { type: Array, required: false, default: () => [] },
//
//   /**
//    * Sets the icon of the alert. If not set, each variant has a default icon.
//    */
//   ...iconProps,
//
//   /**
//    * When set to 'true', enables a transition on the component.
//    * Currently, fade is the only implemented transition.
//    */
//   transition: { type: Boolean, default: true },
// })


// classes that define the general style of the component
const variantClasses = computed(() => {
  let classes = [props.variant]
  if(!['primary', 'secondary'].includes(props.variant)) classes.push('alternate')
  return classes
})

const variantIcon = computed(() => {
  if (props.icon) return props.icon
  switch (props.variant) {
    case 'warning':
    case 'danger':
      return 'danger'
    case 'success':
      return 'success'
    default:
      return 'info'
  }
})

const hasTitle = computed(() => !!props.title)
const hasIcon = !!variantIcon.value
const hasDetails = computed(() => props.details.length !== 0)
const transitionName = computed(() => props.transition ? "alert-fade" : "")

const openState = computed({
  get() { return props.modelValue },
  set(val) { emit("update:modelValue", val) }
})

const emit = defineEmits([ 'update:modelValue' ])
</script>
