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

    <h1 class="twofa-setup__title">
      Настройка двухфакторной аутентификации (2FA)
    </h1>

    <Stepper
      class="mb-40"
      :step="step"
      :items="['Установка', 'Настройка', 'Ввод кода']"
    />

    <Transition name="fade" mode="out-in">
      <div v-if="step === 0">
        <UiAlert class="mb-47">
          Установите приложение Google Authenticator или другое из списка, чтобы
          получить коды двухфакторной аутентификации.
        </UiAlert>

        <div class="twofa-setup__app-block">
          <p class="mb-8">
            Google Authenticator app
          </p>
          <div class="mb-24">
            <UiButton
              color="secondary"
              type="outlined"
              class="mr-24"
            >
              <img
                class="d-flex"
                src="/GetOnAppStore.svg"
                alt="GetOnAppStore"
              >
            </UiButton>

            <UiButton
              color="secondary"
              type="outlined"
            >
              <img
                class="d-flex"
                src="/GetOnGooglePlay.svg"
                alt="GetOnGooglePlay"
              >
            </UiButton>
          </div>
          <div>
            <span>
              Посмотреть весь список 2FA приложений -
              <UiButton
                type="link"
                href="https://www.pcmag.com/picks/the-best-authenticator-apps"
                target="_blank"
              >
                подробнее
              </UiButton>
            </span>
          </div>
        </div>

        <UiButton
          class="twofa-setup__submit mt-47"
          size="large"
          @click="step++"
        >
          {{ $t('next') }}
        </UiButton>
      </div>

      <div v-else-if="step === 1">
        <UiAlert class="mb-24">
          В приложении
          <strong>двухфакторной аутентификации</strong> отсканируйте QR-код или
          скопируйте и вставьте <strong>ключ настройки</strong> с этого экрана
          вручную.
        </UiAlert>

        <div class="twofa-setup__qrzone">
          <img src="/QRCode.svg" alt="QRCode" class="mr-40">

          <UiInput
            id="ssa"
            model-value="GB5AY4JWLUUF2NRT"
            readonly
            copyable
            label="Ключ настройки"
            class="flex-1"
          />
        </div>

        <UiButton
          class="twofa-setup__submit mt-32"
          size="large"
          @click="step++"
        >
          {{ $t('next') }}
        </UiButton>
      </div>

      <div v-else-if="step === 2">
        <UiAlert class="mb-50">
          Далее введите на этом экране <strong>шестизначный код</strong> из
          приложения двухфакторной аутентификации
        </UiAlert>

        <UiCodeInput
          id="pincode"
          class="mb-21"
        >
          <template #title>
            <span class="twofa-setup__pin-title"> 2FA-код </span>
          </template>
        </UiCodeInput>

        <UiButton
          class="twofa-setup__submit mt-32"
          size="large"
          native-type="submit"
        >
          {{ $t('next') }}
        </UiButton>
      </div>
    </Transition>
  </form>
</template>

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

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

const { handleSubmit, isSubmitting } = useForm()
const step = ref(0)

const onSubmit = handleSubmit(async (values) => {
  console.log(values)
  navigateTo('/projects')
})
</script>

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

  &__qrzone {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__app-block {
  }

  &__title {
    margin-bottom: 56px;
  }

  &__pin-title {
    @include txt-m-b;
  }

  &__submit {
    //margin-top: 47px;
    width: 100%;
  }
}
</style>
