post

import React, { useState, useEffect } from 'react';
import { SliderPicker } from 'react-color';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import Checkbox from '@material-ui/core/Checkbox';
import CircularProgress from '@material-ui/core/CircularProgress';


const NewDoctor = () => {



    const [loading, setLoading] = useState(true);
    const [fullname, setFullname] = useState("");
    const [userId, setUserId] = useState("");
    const [color, setColor] = useState('#ff66ff');



    const handleSubmit = async (e) => {

    

        e.preventDefault();

            setLoading(true);
        const body = {
            name: fullname,
            user_id: userId,
            color: color,
            treatments: treatments,
            archived: false
        };

  
  

     
        var url = process.env.REACT_APP_API_URL + 'TU RUTA';

        var requestOptions = {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "api-key": process.env.REACT_APP_API_KEY,
               
            },
            body: JSON.stringify(body)
        }

        const res = await fetch(url, requestOptions);

        if (res.ok) {
           alert('ok')
        } else {
            alert('Error')
        }
        

    }



    return (
        <>

            <form className="frame pb-3" onSubmit={handleSubmit}>

                <h4 className="main-title-treatments">New {t('DoctorsList.0')}</h4>

                <a className='blue-anchors' href="/doctors"> &#60; Back to {t('DoctorsList.0')}</a>

                {loading ? <div className="d-flex justify-content-center"><CircularProgress /></div> :
                    <>
                        <div className="col-5 mt-3" >
                            <h4 className="main-subtitle-treatments">1) {t('NewDoctor.0')}: </h4>
                            <br />
                            <Autocomplete
                                required
                                id="user"
                                name="user"
                                options={clinicUsers}
                                onChange={(e, value) =>
                                    handleUserChange(e, value)
                                }
                                getOptionLabel={(option) => option.email}
                                inputValue={clinicUsers['id']}
                                renderInput={(params) => <TextField {...params} />}
                            />
                        </div>
                        <br />
                        <div className="col-5 mt-3" >
                            <h4 className="main-subtitle-treatments">2) {t('NewDoctor.1')}: </h4>
                            <input
                                required
                                type="text"
                                className="form-control"
                                name="fullname"
                                label="name"
                                value={fullname}
                                onChange={e => setFullname(e.target.value)}
                            />
                        </div>
                        <br />
                        <div className="col-5 mt-3" >
                            <h4 className="main-subtitle-treatments">3) {t('NewDoctor.2')}: </h4>
                            <br />
                            <SliderPicker
                                required    
                                color={color}
                                onChangeComplete={(color) => { setColor(color.hex) }}
                            />
                        </div>
                        <br />
                        <div className="col-5 mt-3" >
                            <h4 className="main-subtitle-treatments">4) {t('NewDoctor.3')}: </h4>
                            <br />
                            <Autocomplete
                                required
                                multiple
                                name="treatments"
                                id="treatments"
                                options={clinicTreatments}
                                disableCloseOnSelect
                                onChange={(e, value) => {
                                    handleTreatmentChange(e, value)
                                }}
                                getOptionLabel={option => option.name}
                                renderOption={(option, { selected }) => (
                                    <React.Fragment>
                                        <Checkbox
                                            icon={icon}
                                            checkedIcon={checkedIcon}
                                            style={{ marginRight: 8, color: '#8754ba' }}
                                            checked={selected}
                                        />
                                        {option.name}
                                    </React.Fragment>
                                )}
                                style={{ width: 600 }}
                                renderInput={params => (
                                    <TextField
                                        {...params}
                                        variant="outlined"
                                        label="Treatments"
                                        placeholder="Select"
                                        fullWidth
                                    />
                                )}
                            />
                            <br />
                        </div>
                        <div className="col-5 mt-3" >
                            <button type="submit" className="btnGo mt-2">
                                SAVE
                            </button>
                        </div>
                    </>}
            </form>
        </>
    );
}

export default NewDoctor;