import React from "react";
import InputMask from "react-input-mask";

const FormNovaConsulta = ({ onCancel }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Agendamento salvo!");
  };

  return (
    <div>
      <h1>Novo Agendamento</h1>

      <form onSubmit={handleSubmit}>
        <h2>Informações do paciente</h2>

        <label>Nome *</label>
        <input type="text" name="nome" placeholder="Insira o nome do paciente" required />
        <br></br>

        <label>CPF do paciente</label>
        <InputMask mask="999.999.999-99" placeholder="000.000.000-00">
          {(inputProps) => <input {...inputProps} type="text" name="cpf" />}
        </InputMask>
        <br></br>

        <label>RG</label>
        <input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
        <br></br>

        <label>Data de nascimento *</label>
        <input type="date" name="dataNascimento" required />
        <br></br>

        <label>Telefone</label>
        <InputMask mask="(99) 99999-9999" placeholder="(99) 99999-9999">
          {(inputProps) => <input {...inputProps} type="tel" name="telefone" />}
        </InputMask>
        <br />

        <label>E-mail</label>
        <input type="email" name="email" placeholder="Email" />
        <br></br>

        <label>Convênio</label>
        <select name="convenio">
          <option value="particular">Particular</option>
          <option value="publico">Público</option>
        </select>
        <br></br>


        <label>Matrícula</label>
        <input type="text" name="matricula" placeholder="000000000" />
        <br></br>

        <label>Validade</label>
        <InputMask mask="99/99/9999" placeholder="00/00/0000">
        {(inputProps) => <input {...inputProps} type="text" name="validade" />}
        </InputMask>

        <br></br>

        <h3>Informações adicionais</h3>
        <button type="button">Documentos e anexos</button>

        <h2>Informações do atendimento</h2>

        <label>Nome do profissional *</label>
        <input type="text" name="profissional" required />

        <label>Tipo de atendimento *</label>
        <input type="text" name="tipoAtendimento" required />

        <label>Unidade *</label>
        <select name="unidade">
          <option value="centro">Núcleo de Especialidades Integradas</option>
          <option value="leste">Unidade Leste</option>
        </select>

        <label>Data *</label>
        <input type="date" name="dataAtendimento" required />

        <label>Início *</label>
        <input type="time" name="inicio" required />

        <label>Término *</label>
        <input type="time" name="termino" required />

        <label>Profissional solicitante</label>
        <select name="solicitante">
          <option value="">Selecione o solicitante</option>
          <option value="secretaria">Secretária</option>
          <option value="medico">Médico</option>
        </select>

        <label>Observações</label>
        <textarea name="observacoes"></textarea>

        <label>
          <input type="checkbox" name="reembolso" /> Pagamento via Reembolso
        </label>

        <label>
          <input type="checkbox" name="imprimirEtiqueta" /> Imprimir na Etiqueta / Pulseira
        </label>

        <h3>Acessibilidade</h3>
        <button type="button"></button>
        <button type="button"></button>
        <button type="button"></button>
        <button type="button"></button>

        <br /><br />
        <button type="submit">Salvar agendamento</button>
        <button type="button" onClick={onCancel}>Cancelar</button>
      </form>
    </div>
  );
};

export default FormNovaConsulta;