export default function Cadastro() {
const [etapaAtiva, setEtapaAtiva] = useState(0);
const [nome, setNome] = useState('');
const [cnpj, setCnpj] = useState('');
const [email, setEmail] = useState('');
const [senha, setSenha] = useState('');
const [senhaVerificada, setSenhaVerificada] = useState('');
const [telefone, setTelefone] = useState('');
const [cep, setCep] = useState('');
const [rua, setRua] = useState('');
const [numero, setNumero] = useState('');
const [complemento, setComplemento] = useState('');
const [estado, setEstado] = useState('');
const {cadastrarDados, erro, sucesso} = usePost();
const navigate = useNavigate();
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
const clinica: IClinica = {
email: email,
nome: nome,
senha: senha,
endereco: {
cep: cep,
rua: rua,
numero: numero,
complemento: complemento,
estado: estado
}
}
if (etapaAtiva !== 0) {
try {
cadastrarDados({url: 'clinica', dados: clinica})
navigate('/login')
} catch (erro) {
erro && alert('Erro ao cadastrar os dados')
}
}
setEtapaAtiva(etapaAtiva + 1);
}
return (
<>
<Img src={Logo} alt="logo da empresa" />
<Stepper activeStep={etapaAtiva}>
<Step>
<StepLabel
StepIconComponent={props => (
<StepCustomizada cor={props.active ? 'lightblue' : 'lightgrey'} />
)}
/>
</Step>
<Step>
<StepLabel
StepIconComponent={props => (
<StepCustomizada cor={props.active ? 'lightblue' : 'lightgrey'} />
)}
/>
</Step>
</Stepper>
{etapaAtiva === 0 ? (
<Form onSubmit={handleSubmit}>
<H2>Primeiro, alguns dados básicos:</H2>
<CampoDigitacao tipo='text' label='Nome' placeholder='Digite o nome da clínica' valor={nome}
onChange={setNome}
/>
<CampoDigitacao tipo='text' label='CNPJ' placeholder='Digite o CNPJ' valor={cnpj}
onChange={setCnpj}
/>
<CampoDigitacao tipo='text' label='Email' placeholder='Insira o endereço de email para login'
valor={email}
onChange={setEmail}
/>
<CampoDigitacao tipo='text' label='Crie uma senha' placeholder='Digita sua senha' valor={senha}
onChange={setSenha}
/>
<CampoDigitacao tipo='text' label='Repita a senha' placeholder='Repita a senha anterior'
valor={senhaVerificada}
onChange={setSenhaVerificada}
/>
<Div>
<BotaoCustomizado type='submit'> Avançar </BotaoCustomizado>
</Div>
</Form>
) : (
<Form onSubmit={handleSubmit}>
<H2>Agora, os dados técnicos:</H2>
<CampoDigitacao tipo='text' label='Telefone' placeholder='(DDD) XXXXX-XXXX' valor={telefone}
onChange={setTelefone}
/>
<CampoDigitacao tipo='text' label='CEP' placeholder='Insira o CEP' valor={cep}
onChange={setCep}
/>
<CampoDigitacao tipo='text' label='Endereço' placeholder='Rua' valor={rua}
onChange={setRua}
/>
<InputContainer>
<FilhoInput>
<CampoDigitacao tipo='text' placeholder='Numero' valor={numero} onChange={setNumero}/>
<CampoDigitacao tipo='text' placeholder='Complemento' valor={complemento}
onChange={setComplemento}
/>
</FilhoInput>
<CampoDigitacao tipo='text' placeholder='Estado' valor={estado} onChange={setEstado}/>
</InputContainer>
<Div>
<BotaoCustomizado type='submit'> Cadastrar </BotaoCustomizado>
</Div>
</Form>
)}
</>
)
}