<template>
  <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">Вход</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">Регистрация</n-button>
            </div>
          </div>
        </n-space>
      </n-tab-pane>

    </n-tabs>
  </n-card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { NCard, NTabs, NTabPane, NCheckbox, NButton, NSpace, NInput, NAutoComplete } from 'naive-ui'

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
    }
  })
})

function signin() {
  console.log(email.value)
  console.log(password.value)
}

function signup() {
  console.log(username.value)
  console.log(email.value)
  console.log(approval.value)
}
</script>

<style scoped>
.sign-card {
  width: 380px;
  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;
}
</style>
