<!-- src/views/Register.vue -->
<template>
    <v-container cols="10" md="3" class="align-center justify-center" >
      <v-card class="card" >
        <v-card-title class="headline text-center">Registro</v-card-title>
        <v-card-text>
          <v-form class="form" ref="registerForm">
            <v-text-field
                v-model="nome"
                label="Nome"
                :rules="nomeRules"
                required
            ></v-text-field>
            <v-text-field
                v-model="email"
                label="Email"
                :rules="emailRules"
                required
              ></v-text-field>
            <v-text-field
                v-model="birth_date"
                label="Data de Nascimento"
                type="data"
                :rules="bithDateRules"
                required
                class="form-group"
            ></v-text-field>
            <v-text-field
                v-model="phone"
                label="Telefone"
                type="phone"
                :rules="phoneRules"
                required
                class="form-group"
            ></v-text-field>
            <v-text-field
                v-model="password"
                label="Senha"
                :rules="passwordRules"
                type="password"
                required
            ></v-text-field>
            <v-text-field
                class="form-group"
                v-model="confirmPassword"
                label="Confirmar Senha"
                :rules="confirmPasswordRules"
                type="password"
                required
            ></v-text-field>
            <v-btn
                block
                color="primary"
                variant="outlined"
                size="large"
                class="text-none rounded-pill"
                elevation="0"
                height="44"
                @click="register" >
                REGISTRAR
            </v-btn>
          </v-form>
        </v-card-text>
      </v-card>
    </v-container>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useAuthStore } from '../stores/register.js';

  const router = useRouter();
  const authStore = useAuthStore();


  const name = ref('');
  const email = ref('');
  const password = ref('');
  const birth_date = ref('');
  const phone = ref('');

  const emailRules = [
    (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
    (v) =>
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(v) || /^[a-zA-Z0-9_.-]+$/.test(v) || 
        'Insira um e-mail válido ou um nome de usuário', // Permite emails ou usernames simples
        ];

  const passwordRules = [(v) => !!v || 'Preencha a senha'];

  const nomeRules = [
    (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
    (v) => v.length >= 3 || 'O nome deve ter pelo menos 3 caracteres', // Mínimo de caracteres
    (v) => /^[a-zA-ZÀ-ÿ\s]+$/.test(v) || 'O nome deve conter apenas letras e espaços' // Apenas letras e espaços
    ];

  const phoneRules = [
    (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
    (v) => /^\(?\d{2}\)?\s?\d{4,5}-?\d{4}$/.test(v) || 'Insira um telefone válido (ex: (11) 98765-4321)', // Validação do formato
    ];

  const birthDateRules = [
    (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
    (v) => /^\d{4}-\d{2}-\d{2}$/.test(v) || 'Use o formato AAAA-MM-DD', // Validação do formato ISO (YYYY-MM-DD)
    (v) => {
        const today = new Date();
        const birthDate = new Date(v);
        return birthDate < today || 'A data de nascimento deve ser no passado';
        },
    ];


  const confirmPasswordRules = (password) => [
  (v) => !!v || 'Preencha o campo', // Verifica se está preenchido
  (v) => v === password.value || 'As senhas não coincidem' // Verifica se as senhas são iguais
  ];
  
  const register = async() => {
    try{
        await authStore.register(name.value,email.value,birth_date.value,phone.value,password.value);
        router.push('/login');
    } catch(error){
        alert('Falha ao cadastrar. Verifique seus dados.');
    }
  };
  </script>

<style scoped>

.headline {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 25px;
  text-transform: uppercase;
  color: rgb(76, 201, 240);
  font-weight: 600;
}

.fill-height {
  min-height: 95vh;
}

.form {
  color: rgb(76, 201, 240);
}

.card {
  border: 1px solid rgb(76, 201, 240);
  border-radius: 50px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow:  20px 20px 60px #d9d9d9,
              -20px -20px 60px #ffffff;
}

.button-container {
margin: 0 !important;
}

:deep(.v-btn) {
text-transform: none;
letter-spacing: 0.5px;
font-weight: 500;
}

</style>
  