<template>
  <form class="twofa" @submit="onSubmit">
    <UiButton
      icon="chevron-left"
      color="secondary"
      type="link"
      class="mb-8"
      href="/projects"
    >
      {{ $t('to_main') }}
    </UiButton>

    <h1 class="mb-8">
      Проверка безопасности
    </h1>

    <UiAlert class="mb-16">
      Введите 6-значный код подтверждения, отправленный на jo**@gmail.com
    </UiAlert>

    <UiCodeInput id="code">
      <template #title>
        <span class="twofa__title"> Код из письма </span>
      </template>
    </UiCodeInput>

    <div class="text-align-right mt-8">
      <UiButton v-if="!showTimer" type="link" @click="resetTimer">
        Отправить код еще раз
      </UiButton>
      <div v-else class="twofa__timer">
        <span>Отправить код повторно через 0:{{ seconds }}</span>
      </div>
    </div>

    <UiButton class="twofa__submit" size="large" native-type="submit">
      {{ $t('next') }}
    </UiButton>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate'

definePageMeta({
  middleware: ['auth'],
  centerContent: true,
})

const seconds = ref(30)
const showTimer = ref(false)

const { handleSubmit, isSubmitting } = useForm()

const onSubmit = handleSubmit(async (values) => {
  console.log(values)
  navigateTo('/2fa/setup')
})

function resetTimer() {
  showTimer.value = true
  const timer = setInterval(() => {
    if (seconds.value === 0) {
      clearInterval(timer)
      showTimer.value = false
      seconds.value = 30
    }
    else {
      seconds.value--
    }
  }, 1000)
}
</script>

<style lang="scss">
.twofa {
  margin: 0 auto;
  width: 500px;

  &__title {
    @include txt-m-b;
  }

  &__submit {
    margin-top: 32px;
    width: 100%;
  }

  &__timer {
    @include txt-i;
    color: $clr-grey-500;
  }
}
</style>
