import React, {useState} from 'react'
import {Content, ButtonsArea} from './PartOne.js'
import {ButtonCancelar, ButtonGrey} from './PartTwo.js'
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import Stepper from '../Stepper.js'
import FormInput from '../FormInput.js'
import styled from 'styled-components'
import {Button} from '@material-ui/core'

export default function PartThree (props) {
    const [phoneNumber, setPhoneNumber] = useState('')
    const handleChangePhoneNumber = (event) => {setPhoneNumber(event.target.value)}

    const [cpf, setCpf] = useState('')
    const handleChangeCpf = (event) => {setCpf(event.target.value)}
    return (
        <>
        <Content>
            <h4>Vamos localizar o seu cadastro:</h4>
            <Stepper items={props.stepper}/>
            <form style={{textAlign:"start"}}>
                <span>CENTRO EDUC INF MEU PEDACINHO DE CHAO</span>
                <FormControl required style={{width:"100%"}}>
                     <p>Inserir o telefone da escola:</p>
                     <FormInput
                        inputType={'text'}
                        name={'DDD e Número'}
                        placeholder={'DDD e Número'}
                        value={phoneNumber}
                        handleChange={handleChangePhoneNumber}
                     >
                     </FormInput>
                </FormControl>
                <FormControl required style={{width:"100%"}}>
                     <p>Inserir o seu CPF</p>
                     <FormInput
                        inputType={'text'}
                        name={'11 dígitos'}
                        placeholder={'11 dígitos'}
                        value={cpf}
                        handleChange={handleChangeCpf}
                        mask={'999.999.999-99'}
                     >
                     </FormInput>
                </FormControl>
                <div style={{display:"flex", justifyContent:"space-evenly",paddingTop:"10px", paddingBottom:"10px"}}>
                    <div style={{display:"flex", justifyContent:"center"}}>
                        <ButtonConfirmar onClick={props.handleBuscar}>BUSCAR</ButtonConfirmar>
                    </div>
                    <div style={{display:"flex", justifyContent:"center"}}>
                        <ButtonGrey>VOLTAR</ButtonGrey><ButtonCancelar>CANCELAR</ButtonCancelar>
                    </div>
                </div>
            </form>
            </Content>
        </>
    )
}

const ButtonConfirmar = styled(Button)`
    background-color : #00bcd4 !important;
    color : #fff !important;
    box-shadow : none !important;
    font-family : 'Roboto',sans-serif !important;
    font-size : 14px !important;
    font-weight : bold !important;
    height : 36px !important;
    border-radius : 3px !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    vertical-align : middle !important;
    text-align : center !important;
    align-items : center !important;

`