<script>
import { ref, computed, watch, defineComponent, onBeforeUpdate } from "vue";
import { useComponentColor, useComponentSize } from "@inkline/inkline/composables";
const componentName = "IAlert";
export default defineComponent({
  name: componentName,
  inheritAttrs: false,
  props: {
    /**
     * The size variant of the alert
     * @type sm | md | lg
     * @default
     * @name size
     */
    size: {
      type: String,
      default: void 0
    },
    /**
     * The color variant of the alert
     * @type info | success | warning | danger
     * @default info
     * @name color
     */
    color: {
      type: String,
      default: "info"
    },
    /**
     * Used to show or hide a dismissible alert
     * @type Boolean
     * @default true
     * @name modelValue
     */
    modelValue: {
      type: Boolean,
      default: true
    },
    /**
     * Shows a dismiss icon on the alert
     * @type Boolean
     * @default false
     * @name dismissible
     */
    dismissible: {
      type: Boolean,
      default: false
    },
    /**
     * The aria-label to use for the dismiss button
     * @type String
     * @default Dismiss
     * @name dismissAriaLabel
     */
    dismissAriaLabel: {
      type: String,
      default: "Dismiss"
    }
  },
  emits: [
    /**
     * Event emitted for setting the modelValue
     * @event update:modelValue
     */
    "update:modelValue"
  ],
  setup(props, { emit, slots }) {
    const dismissed = ref(false);
    const currentColor = computed(() => props.color);
    const currentSize = computed(() => props.size);
    const { color } = useComponentColor({ componentName, currentColor });
    const { size } = useComponentSize({ componentName, currentSize });
    const slotsClasses = ref(getSlotsClasses());
    const classes = computed(() => ({
      [`-${color.value}`]: Boolean(color.value),
      [`-${size.value}`]: Boolean(size.value),
      "-dismissible": props.dismissible,
      ...slotsClasses.value
    }));
    onBeforeUpdate(() => {
      slotsClasses.value = getSlotsClasses();
    });
    watch(
      () => props.modelValue,
      (value) => {
        dismissed.value = !value;
      }
    );
    function getSlotsClasses() {
      return {
        "-with-icon": Boolean(slots.icon)
      };
    }
    function dismiss() {
      dismissed.value = true;
      emit("update:modelValue", false);
    }
    return {
      classes,
      dismissed,
      dismiss
    };
  }
});
</script>

<template>
    <div v-show="!dismissed" v-bind="$attrs" class="alert" role="alert" :class="classes">
        <span v-if="$slots.icon" class="icon" role="img" aria-hidden="true">
            <!-- @slot icon Slot for alert icon -->
            <slot name="icon" />
        </span>
        <div class="content">
            <div v-if="$slots.title" class="title">
                <!-- @slot title Slot for alert title -->
                <slot name="title" />
            </div>
            <!-- @slot default Slot for default alert content -->
            <slot />
        </div>
        <span
            v-if="dismissible"
            class="dismiss"
            role="button"
            :aria-label="dismissAriaLabel"
            @click="dismiss"
        >
            <!-- @slot dismiss Slot for alert dismiss button -->
            <slot name="dismiss">&times;</slot>
        </span>
    </div>
</template>
