<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    ref="alertContainer"
    class="alert-container"
  >
    <div
      :class="[
        'alert',
        {
          'alert--scheme-aux-green':
            scheme === 'feedback-green' || type === 'success',
          'alert--scheme-aux-red':
            scheme === 'feedback-red' || type === 'error',
        },
      ]"
    >
      <div
        ref="progress"
        class="alert__progress"
      ></div>

      <div
        v-show="text"
        class="alert__text"
      >
        {{ text }}
      </div>

      <div
        class="alert__close"
        @click="emitClose"
      >
        <UnnnicIcon
          icon="close-1"
          size="sm"
          scheme="fg-inverted"
        />
      </div>
    </div>
  </div>
</template>

<script>
import UnnnicIcon from '../Icon.vue';

export default {
  components: {
    UnnnicIcon,
  },
  props: {
    text: {
      type: String,
      default: null,
    },
    scheme: {
      type: String,
      default: null,
    },
    onClose: {
      type: Function,
      default: () => {},
    },
    type: {
      type: String,
      default: 'default',
    },
  },
  emits: ['close'],

  mounted() {
    this.$refs.progress.addEventListener('animationend', () => {
      this.$refs.alertContainer.classList.add('slide-down');
    });

    this.$refs.alertContainer.addEventListener('animationend', (event) => {
      if (event.animationName?.startsWith('slideDown')) {
        this.emitClose();
      }
    });
  },

  methods: {
    emitClose() {
      this.onClose();

      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/assets/scss/unnnic' as *;

.alert-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  animation: slideUp 200ms ease;
  pointer-events: none;

  @keyframes slideUp {
    from {
      bottom: -3.375 * $unnnic-font-size;
    }

    to {
      bottom: 0;
    }
  }

  &.slide-down {
    animation-name: slideDown;
  }

  @keyframes slideDown {
    from {
      bottom: 0;
    }

    to {
      bottom: -3.375 * $unnnic-font-size;
    }
  }
}

.alert {
  position: relative;
  border-radius: $unnnic-border-radius-sm;

  display: inline-flex;
  align-items: center;
  margin-bottom: $unnnic-spacing-sm;

  color: $unnnic-color-fg-inverted;
  font-family: $unnnic-font-family-secondary;
  font-size: $unnnic-font-size-body-gt;
  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
  font-weight: $unnnic-font-weight-regular;

  background-color: $unnnic-color-fg-base;

  z-index: 9999;

  overflow: hidden;
  pointer-events: auto;

  @keyframes progress {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  &__progress {
    position: absolute;
    height: 100%;
    background-color: $unnnic-color-fg-emphasized;
    border-radius: $unnnic-border-radius-sm;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: -1;
    animation-name: progress;
    animation-duration: 5000ms;
    animation-timing-function: linear;
  }

  &:hover {
    .alert__progress {
      animation-play-state: paused;
    }
  }

  &__text {
    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
  }

  &__close {
    border-left: 1px solid $unnnic-color-fg-base;

    &:hover {
      background-color: $unnnic-color-fg-base;
    }
  }

  &__close {
    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
    cursor: pointer;
    user-select: none;
  }

  &--scheme-aux-green {
    background-color: $unnnic-color-green-10;

    .alert__progress {
      background-color: $unnnic-color-green-9;
    }

    .alert__close {
      border-left: 1px solid $unnnic-color-green-4;

      &:hover {
        background-color: $unnnic-color-green-4;
      }
    }
  }

  &--scheme-aux-red {
    background-color: $unnnic-color-red-10;

    .alert__progress {
      background-color: $unnnic-color-red-9;
    }

    .alert__close {
      border-left: 1px solid $unnnic-color-red-4;

      &:hover {
        background-color: $unnnic-color-red-4;
      }
    }
  }
}
</style>
