<script setup lang="ts">
import {
  NAutoComplete,
  NButton,
  NCard,
  NCheckbox,
  NInput,
  NSpace,
  NTabPane,
  NTabs,
  useMessage,
} from 'naive-ui'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const router = useRouter()

const message = useMessage()

const username = ref('')
const email = ref('')
const password = ref('')
const approval = ref(false)

const options = computed(() => {
  return ['@mail.ru', '@yandex.ru', '@gmail.com'].map((suffix) => {
    const prefix = email.value.split('@')[0]
    return {
      label: prefix + suffix,
      value: prefix + suffix,
    }
  })
})

async function signin() {
  const res = await authStore.login(email.value, password.value)

  if (!res && authStore.error != null) {
    message.error(authStore.error)
    return
  }

  router.push('/office')
}

async function signup() {
  if (!approval.value) {
    return
  }
  const res = await authStore.signup(username.value, email.value)
  if (!res && authStore.error != null) {
    message.error(authStore.error)
    return
  }
  message.info('Пароль отправлен на почту')
}

async function sendNewPassword() {
  const res = await authStore.refreshPassword(email.value)
  if (!res && authStore.error != null) {
    message.error(authStore.error)
    return
  }
  message.info('Пароль отправлен на почту')
}
</script>

<template>
  <div class="center-block-custom content-block center-middle-block-custom height80">
    <n-card style="margin-bottom: 16px" class="sign-card">
      <n-tabs type="line" animated>
        <n-tab-pane name="signin" tab="Вход">
          <n-space vertical>
            <div class="form-label">Почта</div>
            <n-auto-complete v-model:value="email" :input-props="{
              autocomplete: 'disabled',
            }" :options="options" placeholder="detective@mail.ru" clearable />
            <div class="form-label">Пароль</div>
            <n-input v-model:value="password" type="password" placeholder="********" />
            <div class="form-button-wrapper">
              <div class="form-label">
                <n-button @click="signin" :disabled="email.length == 0 || password.length == 0">
                  <span v-if="!authStore.isLoading"> Вход </span>
                  <span v-else> Подождите... </span>
                </n-button>
              </div>
            </div>
          </n-space>
        </n-tab-pane>

        <n-tab-pane name="signup" tab="Регистрация">
          <n-space vertical>
            <div class="form-label">Позывной</div>
            <n-input v-model:value="username" type="text" placeholder="Шерлок" />
            <div class="form-label">Почта</div>
            <n-auto-complete v-model:value="email" :input-props="{
              autocomplete: 'disabled',
            }" :options="options" placeholder="detective@mail.ru" clearable />
            <div class="form-label">
              <n-checkbox v-model:checked="approval">
                Я согласен с
                <a href="/user-agreement" target="_blank" class="docs-link">пользовательским соглашением</a><br />
                и
                <a href="/privacy-policy" target="_blank" class="docs-link">соглашением о персональных данных</a>
              </n-checkbox>
            </div>
            <div class="form-button-wrapper">
              <div class="form-label">
                <n-button @click="signup" :disabled="username.length == 0 || password.length == 0 || !approval">
                  <span v-if="!authStore.isLoading"> Регистрация </span>
                  <span v-else> Подождите... </span>
                </n-button>
              </div>
            </div>
          </n-space>
        </n-tab-pane>

        <n-tab-pane name="new-password" tab="Новый пароль">
          <n-space vertical>
            <div class="form-label">Почта</div>
            <n-auto-complete v-model:value="email" :input-props="{
              autocomplete: 'disabled',
            }" :options="options" placeholder="detective@mail.ru" clearable />
            <div class="form-button-wrapper">
              <div class="form-label">
                <n-button @click="sendNewPassword" :disabled="email.length == 0">
                  <span v-if="!authStore.isLoading"> Прислать новый пароль </span>
                  <span v-else> Подождите... </span>
                </n-button>
              </div>
            </div>
          </n-space>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<style scoped>
.sign-card {
  background-color: rgb(29 29 29);
}

.form-label {
  margin-top: 10px;
}

.form-button-wrapper {
  display: flex;
  justify-content: center;
}

.docs-link {
  color: #45aa89;
}

.docs-link:hover {
  color: #63e2b7;
}

@media (width >=1024px) {
  .sign-card {
    width: 380px;
  }
}
</style>
