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

interface Patient {
    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;
  }

  type Props = {
    handleFormSection6Data:(
      eyes: string|undefined,
      IntestinesBowls: string|undefined,
      jointsBones:string|undefined,
      allergies: string|undefined,
      earsNoseMouth: string|undefined,
      urinary: string|undefined,
      skin: string|undefined,
      psychological: string|undefined,
      heart: string|undefined,
      muscles: string|undefined,
      internalOrgans: string|undefined,
      gynecological: string|undefined,
      lungsBreathing: string|undefined,
      nerves: string|undefined,
      blood: string|undefined,
      prostate: string|undefined,
      explanation:string|undefined,
    )=> void
    patientDataDiplay:any;
    type:string;
  }

export default function SystemReviewSection6({handleFormSection6Data,patientDataDiplay,type}:Props){
    const [patient, setPatients] = React.useState<Patient>({
        eyes: '',
        IntestinesBowls: '',
        jointsBones:'',
        allergies: '',
        earsNoseMouth: '',
        urinary: '',
        skin: '',
        psychological: '',
        heart: '',
        muscles: '',
        internalOrgans: '',
        gynecological: '',
        lungsBreathing: '',
        nerves: '',
        blood: '',
        prostate: '',
        explanation:'',
      });

      useEffect(()=>{
        handleFormSection6Data(
            patient.eyes,
            patient.IntestinesBowls,
            patient.jointsBones,
            patient.allergies,
            patient.earsNoseMouth,
            patient.urinary,
            patient.skin,
            patient.psychological,
            patient.heart,
            patient.muscles,
            patient.internalOrgans,
            patient.gynecological,
            patient.lungsBreathing,
            patient.nerves,
            patient.blood,
            patient.prostate,
            patient.explanation,
        )
      },[patient])
    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"
                        defaultValue={type=='display'?patientDataDiplay.eyes:patient.eyes}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            eyes: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.IntestinesBowls:patient.IntestinesBowls}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            IntestinesBowls: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.jointsBones:patient.jointsBones}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            jointsBones: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.allergies:patient.allergies}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            allergies: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.earsNoseMouth:patient.earsNoseMouth}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            earsNoseMouth: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.urinary:patient.urinary}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            urinary: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.skin:patient.skin}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            skin: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.psychological:patient.psychological}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            psychological: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.heart:patient.heart}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            heart: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.muscles:patient.muscles}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            muscles: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.internalOrgans:patient.internalOrgans}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            internalOrgans: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.gynecological:patient.gynecological}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            gynecological: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.lungsBreathing:patient.lungsBreathing}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            lungsBreathing: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.nerves:patient.nerves}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            nerves: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.blood:patient.blood}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            blood: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.prostate:patient.prostate}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatients((prevValues) => ({
                            ...prevValues,
                            prostate: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} 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><br></br>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='explanation'
                value={type=='display'?patientDataDiplay.explanation:patient.explanation}
                disabled={type=='display'}
                onChange={(event:any) => {
                  setPatients((prevValues) => ({
                    ...prevValues,
                    explanation: event.target.value,
                  }));
                }}
                />
            </Grid>
            
        </Grid>
        </>
    )
}