import React, { useState } from 'react';
import InputMask from "react-input-mask";

function DoctorForm({ onSave, onCancel, PatientDict }) {

  const FormatTelefones = (valor) => {

   const digits = String(valor).replace(/\D/g, '').slice(0, 11);

  
  return digits
    .replace(/(\d)/, '($1')   // 123 -> 123.
    .replace(/(\d{2})(\d)/, '$1) $2' )
    .replace(/(\d)(\d{4})/, '$1 $2')
    .replace(/(\d{4})(\d{4})/, '$1-$2')
  }


  const FormatCPF = (valor) => {
  
  const digits = String(valor).replace(/\D/g, '').slice(0, 11);


  
  return digits
    .replace(/(\d{3})(\d)/, '$1.$2')   // 123 -> 123.
    .replace(/(\d{3})(\d)/, '$1.$2')   // 123.456 -> 123.456.
    .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
    
  }


  const [formData, setFormData] = useState({
    nome: PatientDict.nome,
    nomeSocial: PatientDict.nome_social,
    dataNascimento: PatientDict.data_nascimento,
    genero: PatientDict.sexo,
    //documento: '',
    //numeroDocumento: '',
    cpf: PatientDict.cpf,
    profissao: PatientDict.profissao ,
    //nomeConjuge: '',
    //outroId: '',
    cep: '',
    cidade: PatientDict.cidade,
    estado: PatientDict.estado,
    bairro: PatientDict.bairro,
    rua: PatientDict.logradouro,
    numero: '',
    complemento: '',
    email: PatientDict.email,
    telefone1: PatientDict.celular,
    telefone2: '',
    telefone3: '',
    observacoes: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });


    if(name.includes('cpf')){

      let cpfFormatado = FormatCPF(e.target.value)

      setFormData({...formData,
      [name]: cpfFormatado,}
      )}

      else if(name.includes('telefone')){
      let telefoneFormatado = FormatTelefones(value)

      console.log(telefoneFormatado)
      


      setFormData({...formData,
        [name]: telefoneFormatado
      })
    }

    

    };

 
  // Função para buscar endereço pelo CEP
  const handleCepBlur = async () => {
    const cep = formData.cep.replace(/\D/g, '');
    if (cep.length === 8) {
      try {
        const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
        const data = await response.json();
        if (!data.erro) {
          setFormData((prev) => ({
            ...prev,
            rua: data.logradouro || '',
            bairro: data.bairro || '',
            cidade: data.localidade || '',
            estado: data.uf || ''
          }));
        } else {
          alert('CEP não encontrado!');
        }
      } catch (error) {
        alert('Erro ao buscar o CEP.');
      }
    }
  };

  const handleSubmit = () => {
    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email){
      alert('Por favor, preencha: Nome ,CPF, Gênero, Data de nascimento e Email.');
      return;
    }
    onSave(
    {nome: formData.nome,
  nomeSocial: formData.nomeSocial,
  dataNascimento: formData.dataNascimento,
  genero: formData.genero,
  //documento: formData.documento,
  //numeroDocumento: formData.numeroDocumento,
  cpf: formData.cpf,
  profissao: formData.profissao,
  //nomeConjuge: formData.nomeConjuge,
  //outroId: formData.outroId,
  endereco: {
    cep: formData.cep,
    cidade: formData.cidade,
    estado: formData.estado,
    bairro: formData.bairro,
    logradouro: formData.rua,
    numero: formData.numero,
    complemento: formData.complemento,
  },

  contato: {
    email: formData.email,
    telefone1: formData.telefone1,
    telefone2: formData.telefone2,
    telefone3: formData.telefone3,
  },

  observacoes: formData.observacoes,
}

      
    );
  };

  return (
    <div className="card p-3">
      <h3 className="mb-3 text-center">MediConnect</h3>

      {/* ------------------ DADOS PESSOAIS ------------------ */}
      <h5 className="mb-3">Dados Pessoais</h5>
      <div className="row">
        <div className="col-md-6 mb-3">
          <label>Nome: *</label>
          <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Nome social:</label>
          <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Data de nascimento:</label>
          <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Gênero: *</label>
          <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
            <option value="">Selecione</option>
            <option value="Masculino">Masculino</option>
            <option value="Feminino">Feminino</option>
            <option value="Outro">Outro</option>
          </select>
        </div>
        {/* 
        <div className="col-md-6 mb-3">
          <label>Outro documento:</label>
          <input type="text" className="form-control" name="documento" value={formData.documento} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Número do documento:</label>
          <input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} />
        </div>
        */}
        <div className="col-md-6 mb-3">
          <label>CPF: *</label>
          <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
        </div>
        <div className="col-md-6 mb-3">
        <label>Especialização:</label>
        <select
          className="form-control"
          name="profissao"
          value={formData.profissao}
          onChange={handleChange}
        >
          <option value="">Selecione uma especialização</option>
          <option value="Cardiologia">Clínica médica (clínico geral)</option>
          <option value="Dermatologia">Pediatria</option>
          <option value="Ginecologia">Ginecologia e obstetrícia</option>
          <option value="Pediatria">Cardiologia</option>
          <option value="Ortopedia">Ortopedia e traumatologia</option>
          <option value="Oftalmologia">Oftalmologia</option>
          <option value="Neurologia">Otorrinolaringologia</option>
          <option value="Psiquiatria">Dermatologia</option>
          <option value="Endocrinologia">Neurologia</option>
          <option value="Oncologia">Psiquiatria</option>
          <option value="Oncologia">Endocrinologia</option>
          <option value="Oncologia">Gastroenterologia</option>
          <option value="Oncologia">Urologia</option>    
         
        </select>
      
      </div>
      {/* 
        <div className="col-md-6 mb-3">
          <label>Nome do esposo(a):</label>
          <input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Identificador de outro sistema:</label>
          <input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} />
        </div>
      */}
      </div>

      {/* ------------------ ENDEREÇO ------------------ */}
      <h5>Endereço</h5>
      <div className="row">
        <div className="col-md-4 mb-3">
          <label>CEP:</label>
          <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
        </div>
        <div className="col-md-8 mb-3">
          <label>Rua:</label>
          <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Bairro:</label>
          <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
        </div>
        <div className="col-md-4 mb-3">
          <label>Cidade:</label>
          <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
        </div>
        <div className="col-md-2 mb-3">
          <label>Estado:</label>
          <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
        </div>
        <div className="col-md-4 mb-3">
          <label>Número:</label>
          <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
        </div>
        <div className="col-md-8 mb-3">
          <label>Complemento:</label>
          <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
        </div>
      </div>

      {/* ------------------ CONTATO ------------------ */}
      <h5>Contato</h5>
      <div className="row">
        <div className="col-md-6 mb-3">
          <label>E-mail: *</label>
          <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Telefone: *</label>
          <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Telefone 2:</label>
          <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
        </div>
        <div className="col-md-6 mb-3">
          <label>Telefone 3:</label>
          <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
        </div>
      </div>

      {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
      <h5>Informações Adicionais</h5>
      <div className="mb-3">
        <label>Observações:</label>
        <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
      </div>

      {/* Botões */}
      <div className="mt-3">
        <button className="btn btn-success me-2" onClick={handleSubmit}>
          Salvar Paciente
        </button>
        <button className="btn btn-light" onClick={onCancel}>
          Cancelar
        </button>
      </div>
    </div>
  );
}


export default DoctorForm;
