<template>
  <transition name="sf-fade">
    <div v-if="visible" class="sf-notification" :class="`color-${type}`">
      <!--@slot Custom notification icon. Slot content will replace default icon.-->
      <slot name="icon" v-bind="{ icon }">
        <SfIcon
          v-if="!!icon"
          class="sf-notification__icon"
          :icon="icon"
          size="lg"
          color="white"
        />
      </slot>
      <div>
        <!--@slot Custom title. Slot content will replace default title.-->
        <slot name="title" v-bind="{ title }">
          <div v-if="title" class="sf-notification__title smartphone-only">
            {{ title }}
          </div>
        </slot>
        <!--@slot Custom message. Slot content will replace default message.-->
        <slot name="message" v-bind="{ message }">
          <span v-if="message" class="sf-notification__message">{{
            message
          }}</span>
        </slot>
        <!--@slot Custom action. Slot content will replace default action.-->
        <slot name="action" v-bind="{ action, actionHandler }">
          <SfButton
            v-if="action"
            class="sf-button--pure sf-notification__action"
            @click="actionHandler"
          >
            {{ action }}
          </SfButton>
        </slot>
      </div>
      <!--@slot Custom notification close icon. Slot content will replace default close icon.-->
      <slot name="close" v-bind="{ closeHandler }">
        <SfButton
          aria-label="Close notification"
          class="sf-button--pure sf-notification__close"
          @click="closeHandler"
        >
          <SfIcon icon="cross" color="white" />
        </SfButton>
      </slot>
    </div>
  </transition>
</template>
<script>
import SfIcon from "../../atoms/SfIcon/SfIcon.vue";
import SfButton from "../../atoms/SfButton/SfButton.vue";
export default {
  name: "SfNotification",
  components: {
    SfIcon,
    SfButton,
  },
  props: {
    /**
     * Visibility of the Notification. Default value is false.
     */
    visible: {
      type: Boolean,
      default: false,
    },
    /**
     * Title that will be displayed in Notification.
     */
    title: {
      type: String,
      default: "",
    },
    /**
     * Message that will be displayed in Notification.
     */
    message: {
      type: String,
      default: "",
    },
    /**
     * Action that will be displayed in Notification.
     */
    action: {
      type: String,
      default: "",
    },
    /**
     * Notification type ("secondary", "info", "success", "warning", "danger"). Check "Knobs" section to see how they look like.
     */
    type: {
      type: String,
      default: "secondary",
      validator: function (value) {
        return ["secondary", "info", "success", "warning", "danger"].includes(
          value
        );
      },
    },
  },
  computed: {
    icon() {
      switch (this.type) {
        case "success":
          return "added_to_cart";
        case "danger":
          return "info_shield";
        default:
          return "info_circle";
      }
    },
  },
  methods: {
    actionHandler() {
      /**
       * Event for action button
       * @type {Event}
       */
      this.$emit("click:action");
    },
    closeHandler() {
      /**
       * Event for close icon
       * @type {Event}
       */
      this.$emit("click:close");
    },
  },
};
</script>
<style lang="scss">
@import "~@highdigital/sharedt/styles/components/molecules/SfNotification.scss";
</style>
