import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React from "react";

interface FormValues {
    eyes: string;
    IntestinesBowls: string;
    jointsBones:string;
    allergies: string;
    earsNoseMouth: string;
    urinary: string;
    skin: string;
    psychological: string;
    heart: string;
    muscles: string;
    internalOrgans: string;
    gynecological: string;
    lungsBreathing: string;
    nerves: string;
    blood: string;
    prostate: string;
    explanation:string;
  }

export default function SystemReviewSection6(){
    const [values, setValues] = React.useState<FormValues>({
        eyes: '',
        IntestinesBowls: '',
        jointsBones:'',
        allergies: '',
        earsNoseMouth: '',
        urinary: '',
        skin: '',
        psychological: '',
        heart: '',
        muscles: '',
        internalOrgans: '',
        gynecological: '',
        lungsBreathing: '',
        nerves: '',
        blood: '',
        prostate: '',
        explanation:'',
      });
    return(
        <>
        <Grid item xs={12} className='collapsable-form-style '> 
            <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
        </Grid>
        <Grid container direction="row">
        <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Eyes</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            eyes: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Intestines/Bowls</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            presentProblemBefore: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Joints/Bones</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            jointsBones: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Allergies</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            allergies: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            earsNoseMouth: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Urinary</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            urinary: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Skin</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            skin: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Psychological/Emotional</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            psychological: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Heart</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            heart: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Muscles</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            muscles: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Internal Organs</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            internalOrgans: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Gynecological menstrual/Brest</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            gynecological: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Lungs/Breathing</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            lungsBreathing: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Nerves</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            nerves: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Blood</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            blood: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Prostate/Testicular/Penile</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setValues((prevValues) => ({
                            ...prevValues,
                            prostate: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>
          <Grid item xs={6} className='collapsable-form-style-multiline'>
          <FormLabel>Please explain your check marks:</FormLabel>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='explanation'
                onChange={(event:any) => {
                  setValues((prevValues) => ({
                    ...prevValues,
                    explanation: event.target.value,
                  }));
                }}
                />
            </Grid>
            
        </Grid>
        </>
    )
}