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

    <h1 class="mb-40">
      Identity verification
    </h1>

    <!--    TODO: бырбырбыр -->
    <Stepper
      :step="step"
      :items="[
        'Personal <br> information',
        'Identity <br> verification',
        'Organization <br> data',
      ]"
    />

    <Transition
      name="fade"
      mode="out-in"
    >
      <div v-if="step === 0" class="mt-40">
        <UiInput
          id="name"
          label="Name"
          class="mb-10"
          rules="required"
        />
        <UiInput
          id="surname"
          label="Surname"
          class="mb-10"
          rules="required"
        />
        <UiInput
          id="patronymic"
          label="Patronymic (optional)"
          class="mb-28"
        />
        <UiInput
          id="bday"
          label="Date of birth"
          class="mb-10"
          rules="required"
        />
        <UiSelect
          id="region"
          class="w-100"
          label="Country / Region of residence"
          placeholder="Choose an option"
          :options="['Россия', 'священная', 'наша', 'держава']"
        />

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

      <div v-else-if="step === 1" class="mt-40">
        <UiAlert class="mb-40">
          Upload a photo of the <strong> front </strong> and <strong> back </strong> of your document
        </UiAlert>

        <VerificationWeAccept
          class="mb-40"
          :list="[{ title: 'Identity document', underTitle: '(For example: passport, residence permit, driver\'s license.)' }]"
        />

        <!--        TODO: zaglushka -->
        <div class="zaglushka" />

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

      <div v-else-if="step === 2" class="mt-22">
        <UiAlert class="mb-24">
          Upload the documents for the right to conduct commercial activities
        </UiAlert>

        <VerificationWeAccept
          class="mb-24"
          :list="[
            { title: 'Company registration documents.' },
            { title: 'License to trade.' },
            { title: 'Documents on the identity of the individual to the organization,', underTitle: '(power of attorney, inheritance, donation, sub-sponsorship)' },
          ]"
        />

        <!--        TODO: zaglushka -->
        <div class="zaglushka" />

        <UiButton
          class="w-100 mt-24"
          size="large"
          href="/verification/processing"
        >
          {{ $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">
.verification {
  margin: 0 auto;
  width: 500px;
}

.zaglushka {
  height: 143px;
  padding: 24px;
  border-radius: 12px;
  border: 1px dashed var(--grey-grey-400, #A7B9D5);
  background: var(--grey-grey-100, #F4F6FF);
}
</style>
