<script setup lang="ts">
import { ref } from 'vue'
import { useRaf } from '@/composables/useRaf'

const currentProgress = ref(0)
const time = ref(0)

const { pause, start, reset } = useRaf(
  ({ progress, timeElapsed }) => {
    currentProgress.value = progress

    time.value = timeElapsed
  },
  3000,
  false
)
</script>

<template>
  <div>
    <main class="flex items-center justify-center">
      <button
        class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
        @click="start"
      >
        Start
      </button>
      <button
        class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
        @click="pause"
      >
        Pause
      </button>
      <button
        class="text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
        @click="reset"
      >
        Reset
      </button>
    </main>

    <div class="flex flex-col items-center progress">
      <div><span class="font-bold">CURRENT PROGRESS</span>: {{ currentProgress.toFixed(2) }}</div>
      <div>
        <span class="font-bold">TIME REMAINING</span>: {{ ((3000 - time) / 1000).toFixed(2) }}s
      </div>
      <div><span class="font-bold">TIME ELAPSED</span>: {{ (time / 1000).toFixed(2) }}s</div>
    </div>
  </div>
</template>