import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import * as React from 'react';
import Table from '../Helper/AddNewTable';
import { useEffect } from 'react';

interface Patient {
  generalHealth: string;
  presentProblemBefore: string;
  ifYespresentProblemBefore:string;
  ifYestreatmentProvided: string;
  ifYesOutcome: string;
  strokeBloodclotting: string;
  ifYesstrokeBloodclotting: string;
  dizzinessFetigue: string;
  ifyesdizzinessFetigue: string;
  antiColligent: string;
  injuriesHospitalization: string;
  supplementsOrDrugs: string;
}

type Props = {
  handleFormSection5Data:(
    generalHealth: string|undefined,
    presentProblemBefore: string|undefined,
    ifYespresentProblemBefore:string|undefined,
    ifYestreatmentProvided: string|undefined,
    ifYesOutcome: string|undefined,
    strokeBloodclotting: string|undefined,
    ifYesstrokeBloodclotting: string|undefined,
    dizzinessFetigue: string|undefined,
    ifyesdizzinessFetigue: string|undefined,
    antiColligent: string|undefined,
    injuriesHospitalization: string|undefined,
    supplementsOrDrugs: string|undefined,
  )=> void
}


export default function PastTreatment5({handleFormSection5Data}:Props){

    const [patient, setPatient] = React.useState<Patient>({
        generalHealth: '',
        presentProblemBefore: '',
        ifYespresentProblemBefore:'',
        ifYestreatmentProvided:'',
        ifYesOutcome:'',
        strokeBloodclotting: '',
        ifYesstrokeBloodclotting: '',
        dizzinessFetigue: '',
        ifyesdizzinessFetigue:'',
        antiColligent: '',
        injuriesHospitalization: '',
        supplementsOrDrugs:''
      });

      useEffect(()=>{
        handleFormSection5Data(
            patient.generalHealth,
            patient.presentProblemBefore,
            patient.ifYespresentProblemBefore,
            patient.ifYestreatmentProvided,
            patient.ifYesOutcome,
            patient.strokeBloodclotting,
            patient.ifYesstrokeBloodclotting,
            patient.dizzinessFetigue,
            patient.ifyesdizzinessFetigue,
            patient.antiColligent,
            patient.injuriesHospitalization,
            patient.supplementsOrDrugs,
        )
      },[patient])

    return(
        <>
        <form>
      <Grid container direction="row">
        
      <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Overall your General Healgth is:</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            generalHealth: event.target.value,
                          }));
                        }}
                      >
                        <FormControlLabel value="Excellent" control={<Radio />} label="Excellent" />
                        <FormControlLabel value="Very Good" control={<Radio />} label="Very Good" />
                        <FormControlLabel value="Good" control={<Radio />} label="Good" />
                        <FormControlLabel value="Fair" control={<Radio />} label="Fair" />
                        <FormControlLabel value="Poor" control={<Radio />} label="Poor" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Have you experienced your present problem before?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((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={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYespresentProblemBefore: event.target.value,
                  }));
                }}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="Was treatment provided?If yes, by whom?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYestreatmentProvided: event.target.value,
                  }));
                }}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="Outcome?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYesOutcome: event.target.value,
                  }));
                }}
                />
            </Grid>
           

          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Have you ever had a stroke or issues with blood clotting?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            strokeBloodclotting: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                disabled={patient.strokeBloodclotting!=='Yes'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYesstrokeBloodclotting: event.target.value,
                  }));
                }}
                />
            </Grid>

          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Have you recently experienced dizziness, unexplained fatigue, weight loss or blood loss?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            dizzinessFetigue: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                disabled={patient.dizzinessFetigue!=='Yes'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifyesdizzinessFetigue: event.target.value,
                  }));
                }}
                />
            </Grid>

          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Are you currently taking anti-coagulant or blood thinning medication?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            antiColligent: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            injuriesHospitalization: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={12} sx={{marginLeft:2, marginBottom:3}} >
                <Table />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-multiline'>
          <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    supplementsOrDrugs: event.target.value,
                  }));
                }}
                />
            </Grid>
            
      </Grid>
    </form>
        </>
    )
}