<script setup>

import { ref } from 'vue';
import { Icon } from '@cloudron/pankow';

const visible = ref(false);
const success = ref(false);
const TIMEOUT = 1500;
let timeoutId;

defineExpose({
  success() {
    clearTimeout(timeoutId);

    success.value = true;
    visible.value = true;

    timeoutId = setTimeout(() => {
      visible.value = false;
    }, TIMEOUT);
  },
  error() {
    clearTimeout(timeoutId);

    success.value = false;
    visible.value = true;

    timeoutId = setTimeout(() => {
      visible.value = false;
    }, TIMEOUT);
  }
});

</script>

<template>
  <Transition name="bounce">
    <div class="save-indicator" v-if="visible" :class="{ success: success, error: !success }"><Icon :icon="success ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/></div>
  </Transition>
</template>

<style scoped>

.save-indicator {
  position: absolute;
  right: -10px;
}

.save-indicator.success {
  color: var(--pankow-color-success);
}

.save-indicator.error {
  color: var(--pankow-color-danger);
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

</style>
