<template>
  <div
    ref="banner"
    :class="`sam-banner is-${samStyle}`"
    data-samora
  >
    <div class="sam-banner__content">
      <div class="sam-banner__image-or-icon-container">
        <SamImage
          v-if="imageUrl"
          :image="imageUrl"
          :alt="imageAlt"
          image-height="100%"
          class="sam-banner__image"
        />
        <SamIcon
          v-else
          class="sam-banner__icon"
          :icon="bannerIcon"
          :size="ICON_SIZES.SMALL"
        />
      </div>
      <div>
        <div>
          <template v-if="$slots.title">
            <slot name="title" />
          </template>
          <h6
            v-else-if="title"
            class="sam-banner__title"
          >
            {{ title }}
          </h6>
        </div>

        <div>
          <template v-if="$slots.default">
            <slot />
          </template>
          <p
            v-else-if="text"
            class="sam-banner__text"
          >
            {{ text }}
          </p>
        </div>
      </div>
    </div>

    <div
      v-if="dismissible || $slots.actions"
      class="sam-banner__actions"
    >
      <SamButton
        v-if="dismissible"
        :sam-style="samStyle"
        label="Dismiss"
        @click="dismiss"
      />
      <slot name="actions" />
    </div>
  </div>
</template>

<script>
import SAMORA_STYLES from '../../../utils/constants/samora-styles.enum';
import SamIcon, { ICON_SIZES } from '../SamIcon/SamIcon.vue';
import SamButton from '../SamButton/SamButton.vue';
import SamImage from '../SamImage/SamImage.vue';

export const BANNER_STYLES = {
  PRIMARY: SAMORA_STYLES.PRIMARY,
  SECONDARY: SAMORA_STYLES.SECONDARY,
  SUCCESS: SAMORA_STYLES.SUCCESS,
  WARNING: SAMORA_STYLES.WARNING,
  DANGER: SAMORA_STYLES.DANGER,
};

const iconMapper = new Map([
  [SAMORA_STYLES.PRIMARY, 'alert-information'],
  [SAMORA_STYLES.SUCCESS, 'interface-confirm-circle'],
  [SAMORA_STYLES.WARNING, 'alert-exclamation-circle'],
  [SAMORA_STYLES.DANGER, 'alert-exclamation-triangle'],
]);

export default {
  name: 'SamBanner',
  components: { SamButton, SamIcon, SamImage },
  props: {
    /**
     * The banner's title.
     */
    title: {
      type: String,
      required: false,
      default: '',
    },
    /**
     * The banner's text.
     */
    text: {
      type: String,
      required: false,
      default: '',
    },
    /**
     * If the banner should have a dismiss action button.
     */
    dismissible: {
      type: Boolean,
      required: false,
      default: true,
    },
    /**
     * Image source URL.
     */
    imageUrl: {
      type: String,
      required: false,
      default: '',
    },
    /**
     * Image alt.
     */
    imageAlt: {
      type: String,
      required: false,
      default: '',
    },
    /**
     * Samora style to be applied
     * @values primary, success, warning, danger
     */
    samStyle: {
      type: String,
      required: false,
      default: BANNER_STYLES.PRIMARY,
      validator: (val) => Object.values(BANNER_STYLES).includes(val),
    },
  },
  data: () => ({
    ICON_SIZES,
  }),
  computed: {
    bannerIcon() {
      return iconMapper.get(this.samStyle) || iconMapper.get(SAMORA_STYLES.PRIMARY);
    },
  },
  methods: {
    dismiss($event) {
      this.$refs.banner.style.display = 'none';
      this.$emit('dismiss', $event);
    },
  },
};
</script>

<style lang="scss" scoped>
.sam-banner {
  @extend .px-4, .py-3, .d-flex, .items-center, .wrap-flex;
  background-color: $informative--surface;
  border-radius: $size--1;

  &.is-success {
    border-color: $neutral--90;
    background-color: $success--surface;

    :deep(.sam-banner__icon svg path) {
      fill: $success--main;
    }
  }

  &.is-warning {
    border-color: $warning--main;
    background-color: $warning--surface;
  }

  &.is-danger {
    border-color: $error--main;
    background-color: $error--surface;
    border: $error--main 1px solid;
  }

  &.is-secondary {
    border-color: $info-secondary--main;
    background-color: $info-secondary--surface;
  }

  &__title {
    @extend .text--body-2--medium;
  }

  &__text {
    @extend .text--caption;
  }

  &__content {
    @extend .d-inline-flex, .items-center, .mr-4;
    flex: 1;
    color: $neutral--90;
    word-wrap: break-word;

    > :first-child {
      @extend .mr-2;
    }
  }

  &__actions {
    @extend .d-inline-flex;

    > :not(:last-child) {
      @extend .mr-2;
    }
  }

  &__image-or-icon-container {
    align-self: flex-start;
    height: 100%;
    margin-top: 2px;
  }
}
</style>
