import { Component, EventEmitter, Input, Output, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { Unidade } from 'src/app/models/unidSaude/unidade.model';
import { UnidSaudeService } from 'src/app/services/unidSaude/unid-saude.service';
import { LoginService } from 'src/app/services/login/login.service';
import { MatDialog } from '@angular/material/dialog';
import { CadDialogComponent } from '../cad-dialog/cad-dialog.component';
import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{
  @Input() isOpen = false;

  @Output() cadastrarUnidadeEmitter: EventEmitter<Unidade> = new EventEmitter<Unidade>();

  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>;
  maxHeight = 0;

  hide : boolean = true
  showCadastroForm: boolean = false
  showCadastroButtons: boolean = true
  dynamicFormFields: any[] = []
  formBoxClass: string = 'form-box'
  isSenhaValida? : boolean
  isEmailValido? : boolean
  isCnesValido? : boolean
  id?: number
  cnes : string = ''
  email : string = ''
  password : string = ''
  unidade : Unidade = {}
  acao: string = 'logar'
  errorMessage: string = ''
  nome: string = ''
  cidade: string = ''
  uf: string = ''
  passwordConfirm : string = ''
  
  constructor(private router: Router, private readonly unidService : UnidSaudeService, private readonly loginService : LoginService, public dialog: MatDialog) {
  }

   showHide(){
    this.hide = !this.hide
  }
  
   toggleCadastro() {
    this.errorMessage = ''

    this.showCadastroForm = !this.showCadastroForm;
    this.showCadastroButtons = this.showCadastroForm;

     if (this.showCadastroForm) {
      this.acao = 'cadastrar';
      this.dynamicFormFields = [
        { placeholder: 'Nome da Instituição', value: '' },
        { placeholder: 'CNES', value: '' },
        { placeholder: 'CEP', value: '' },
        { placeholder: 'Cidade', value: '' },
        { placeholder: 'Estado', value: '' },
        { placeholder: 'E-mail', value: '' },
        { placeholder: 'Criar Senha', value: '' },
        { placeholder: 'Confirmar Senha', value: '' }
      ];
    } else {
      this.acao = 'logar';
      this.dynamicFormFields = [];
    }
    this.formBoxClass = this.showCadastroForm ? 'form-box expanded' : 'form-box';
  }

   addDynamicFormField() {
    this.dynamicFormFields.push({ placeholder: 'Novo Campo', value: '' });
  }

  decidirAcao(){
    if (this.acao === 'cadastrar'){
      this.cadastrar()
      return;
    }
    const unidLog : Unidade = {
      id: this.id, 
      cnes: this.cnes, 
      email: this.email,
      senha : this.password,
    }

    this.loginService.logar(unidLog)

    this.isCnesValido = this.loginService.isCNESValido
    this.isEmailValido = this.loginService.isEmailValido
    this.isSenhaValida = this.loginService.isSenhaValido

    if(!this.isCnesValido || !this.isEmailValido || !this.isSenhaValida){
      this.errorMessage = 'Credenciais inválidas!'
    }
  }

  cadastrarUnid(event: Unidade)
  {
    this.unidade = event
  }

  getErrorMessage(): string {
    return this.loginService.errorMessage;
  }

  validarCampos(){
    return this.nome.trim().length > 0 && 
    this.cnes.trim().length > 0 && 
    this.email.trim().length > 0 && 
    this.cidade.trim().length > 0 &&
    this.uf.trim().length > 0 && 
    this.password.trim().length > 0 && 
    this.passwordConfirm.trim().length > 0 &&
    this.password == this.passwordConfirm
  }

  cadastrar(){
    if(this.unidade.nomeInstituicao?.trim().length){
      this.apiCadastroUnidade(this.unidade).subscribe({
        next: (res) => {
          console.log(res)
        },
        error: (err) => 
        {
          console.error(err)
        }
       })
    }
  }

  cadastrarUnidade()
 {
   if(this.validarCampos()){
   let u : Unidade = { id : 0, nomeInstituicao : this.nome, cnes : this.cnes, cidade: this.cidade, uf: this.uf, email : this.email, senha : this.password }
   this.cadastrarUnidadeEmitter.emit(u);
  }
 }
 
  apiCadastroUnidade(unidade : Unidade)
  {
    return this.unidService.cadastrarUnid(unidade)
  }

  openDialog() {
    if (this.showCadastroForm) {
      const dialogRef = this.dialog.open(ConfirmModalComponent, {
        width: '400px',
        height: '150px'
      });
  
      dialogRef.afterClosed().subscribe((result) => {
        if (result === true) {
          this.decidirAcao();
        } else {
          console.log('Erro ao cadastrar unidade');
        }
      });
    } else {
      this.decidirAcao();
    }
  }
}
