<template>
  <div
    class="cursor-pointer"
    :class="{ 'text-white': light, 'animate-pulse': isSensitive }"
    :title="`2 mal klicken für ${action}`"
    @click.prevent="handleClick"
  >
    <slot :isSensitive="isSensitive">
      <CursorArrowRaysIcon v-if="!isSensitive" class="h-5 w-5" />
      <CursorArrowRippleIcon v-else class="h-5 w-5" />
    </slot>
  </div>
</template>

<script setup lang="ts">
import { CursorArrowRaysIcon, CursorArrowRippleIcon } from "@heroicons/vue/24/outline";
import { defineComponent } from "vue";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    light: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
      default: "Bestätigung",
    },
  },
  emits: ["click:first", "click:submit", "click:reset"],
  data() {
    return {
      isSensitive: false as boolean,
      timeout: undefined as any,
    };
  },
  beforeUnmount() {
    try {
      clearTimeout(this.timeout);
    } catch (error) {}
  },
  methods: {
    handleClick() {
      if (this.isSensitive) {
        clearTimeout(this.timeout);
        this.isSensitive = false;
        this.$emit("click:submit");
      } else {
        this.timeout = setTimeout(() => {
          this.isSensitive = true;
          this.$emit("click:first");

          this.timeout = setTimeout(() => {
            this.isSensitive = false;
            this.$emit("click:reset");
          }, 2000);
        }, 500);
      }
    },
  },
});
</script>
