<template>
  <div :id="`toast-${props.id}`" class="toast" :class="props.type">
    <div class="background"></div>
    <div class="wrapper">
      <div
        :id="`toast-icon-${props.id}`"
        class="icon small lg-medium status no-shrink"
      >
        <SpIcon
          v-if="props.type === 'success'"
          class="success"
          name="sp-status-success"
        />

        <SpIcon
          v-if="props.type === 'alert'"
          class="alert"
          name="sp-status-alert"
        />
        <SpIcon
          v-if="props.type === 'info'"
          class="alert"
          name="sp-status-info"
        />
        <SpIcon
          v-if="props.type === 'error'"
          class="alert"
          name="sp-status-error"
        />
      </div>
      <div
        :id="`toast-body-${props.id}`"
        class="body grow h700"
        v-html="props.body"
      ></div>
      <div
        :id="`toast-close-${props.id}`"
        class="icon small lg-medium pointer no-shrink"
        @click="$emit('close')"
      >
        <SpIcon name="sp-close" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, ref, PropType } from "vue";
import { StatusTypes } from "@/enums";
export default defineComponent({
  props: {
    body: {
      required: true,
      type: String,
      default: "",
    },
    type: {
      required: true,
      default: StatusTypes.Error,
      type: String as PropType<StatusTypes>,
    },
    id: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const timeoutId = ref(null);
    const timer = ref<number>(5);

    const close = (): void => {
      clearTimeout(timeoutId.value);
      emit("close");
    };

    const setTimer = (): void => {
      timeoutId.value = setTimeout(() => {
        emit("close");
      }, timer.value * 1000);
    };

    onMounted((): void => {
      setTimer();
    });

    onBeforeMount((): void => {
      clearTimeout(timeoutId.value);
    });

    return {
      props,
    };
  },
});
</script>

<style lang="scss">
.toast {
  max-width: 500px;
  z-index: 1;
  border-radius: 14px;
  user-select: none;
  position: relative;
  background-color: white;
  --color: var(--error-color);

  .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--color);
    opacity: 0.2;
    z-index: 0;
  }

  .wrapper {
    padding: 16px;
    position: relative;
    z-index: 1;
    display: flex;

    .icon {
      &.status {
        svg path {
          fill: var(--color);
        }
      }
    }

    .body {
      margin: 0 8px;
      color: var(--color);
    }
  }

  &:not(:last-of-type) {
    margin-bottom: 20px;
  }

  &.error {
    --color: var(--error-color);
  }

  &.alert {
    --color: var(--alert-color);
  }

  &.success {
    --color: var(--success-color);
  }

  &.info {
    --color: var(--info-color);
  }
}
</style>
