Vue.component('register-form', {
    template: `
      <div>
          <div class="logo">
              <img src="imagens/logo.png" alt="Logo da Empresa">
          </div>
          <h2>Cadastre-se</h2>
          <form @submit.prevent="register">
          <div class="text-box">
              <input type="text" v-model="tipodecarga" placeholder="Nome Completo" required>
              <input type="text" v-model="email" placeholder="E-mail" required>
              <input type="password" v-model="senha" placeholder="Senha" required>
              <input type="password" v-model="confirmarSenha" placeholder="Confirme sua Senha" required> 
              <animated-button :disabled="loading" type="submit">Cadastrar</animated-button>
          </div>
          </form>
          <div class="options">
              <a href="#" @click.prevent="$emit('switch-view', 'login-form')">Já tem uma conta? Faça login</a>
          </div>
      </div>
    `,
    data() {
        return {
            tipodecarga: '',
            email: '',
            senha: '',
            confirmarSenha: '',
            loading: false // Para controle de loading
        }
    },
    methods: {
        async register() {
            // Verificar se as senhas são iguais
            if (this.senha !== this.confirmarSenha) { 
                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao cadastrar!',
                    text: 'As senhas não coincidem.',
                    confirmButtonText: 'Tente novamente',
                    customClass: {
                        confirmButton: 'swal-button-center custom-button'
                    }
                });
                return; // Interromper o processo de cadastro
            }

            this.loading = true; // Ativar loading
            try {
                const response = await axios.post('https://api-pi4-323375316797.us-east4.run.app/api/novoUsuario', {
                    nome: this.tipodecarga,
                    email: this.email,
                    senha: this.senha,
                });

                Swal.fire({
                    icon: 'success',
                    title: 'Cadastro realizado com sucesso!',
                    text: 'Você já pode fazer login.',
                    confirmButtonText: 'Ok',
                    customClass: {
                        confirmButton: 'swal-button-center'
                    }
                });

                // Limpar os campos após o cadastro
                this.tipodecarga = '';
                this.email = '';
                this.senha = '';
                this.confirmarSenha = '';

                // Emitir evento para mudar a visualização, se necessário
                this.$emit('switch-view', 'login-form');

            } catch (error) {
                const errorMessage = error.response?.data?.error || 'Ocorreu um erro ao tentar cadastrar.';
                console.error('Erro ao cadastrar', errorMessage);

                Swal.fire({
                    icon: 'error',
                    title: 'Erro ao cadastrar',
                    text: errorMessage,
                    confirmButtonText: 'Tente novamente',
                    customClass: {
                        confirmButton: 'swal-button-center custom-button'
                    }
                });
            } finally {
                this.loading = false; // Desativar loading
            }
        }
    }
});