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
  patientDataDiplay:any;
  type:string;
}


export default function PastTreatment5({handleFormSection5Data,patientDataDiplay,type}: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"
                        defaultValue={type=='display'?patientDataDiplay.generalHealth:patient.generalHealth}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            generalHealth: event.target.value,
                          }));
                        }}
                      >
                        <FormControlLabel disabled={type=='display'} value="Excellent" control={<Radio />} label="Excellent" />
                        <FormControlLabel disabled={type=='display'} value="Very Good" control={<Radio />} label="Very Good" />
                        <FormControlLabel disabled={type=='display'} value="Good" control={<Radio />} label="Good" />
                        <FormControlLabel disabled={type=='display'} value="Fair" control={<Radio />} label="Fair" />
                        <FormControlLabel disabled={type=='display'} 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"
                        defaultValue={type=='display'?patientDataDiplay.presentProblemBefore:patient.presentProblemBefore}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            presentProblemBefore: 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYespresentProblemBefore: event.target.value,
                  }));
                }}
                />
            </Grid>
            <Grid item 
            xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="Was treatment provided?If yes, by whom?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.ifYestreatmentProvided:patient.ifYestreatmentProvided}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    ifYestreatmentProvided: event.target.value,
                  }));
                }}
                />
            </Grid>
            <Grid item 
            xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="Outcome?" 
                name='treatmentGoal'
                disabled={patient.presentProblemBefore!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.ifYesOutcome:patient.ifYesOutcome}
                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"
                        defaultValue={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
                        value={type=='display'?patientDataDiplay.strokeBloodclotting:patient.strokeBloodclotting}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            strokeBloodclotting: 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={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                value={type=='display'?patientDataDiplay.ifYesstrokeBloodclotting:patient.ifYesstrokeBloodclotting}
                disabled={patient.strokeBloodclotting!=='Yes'||type=='display'}
                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'}}
                        defaultValue={type=='display'?patientDataDiplay.dizzinessFetigue:patient.dizzinessFetigue}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            dizzinessFetigue: 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={4} className='collapsable-form-style-form7'>
                <TextField 
                variant="outlined"
                label="If yes, when?" 
                name='treatmentGoal'
                disabled={patient.dizzinessFetigue!=='Yes'}
                value={type=='display'?patientDataDiplay.ifyesdizzinessFetigue:patient.ifyesdizzinessFetigue}
                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'}}
                        defaultValue={type=='display'?patientDataDiplay.antiColligent:patient.antiColligent}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            antiColligent: 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={12} className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                    <FormLabel>Have you ever had any major illness, injuries, hospitalization or surgeries?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        defaultValue={type=='display'?patientDataDiplay.injuriesHospitalization:patient.injuriesHospitalization}
                        sx={{display:'flex', flexDirection:'row'}}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            injuriesHospitalization: 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={12} sx={{marginLeft:2, marginBottom:3}} >
                <Table 
                handleFormSection5Data={handleFormSection5Data}
                patientDataDiplay={patientDataDiplay}
                type={type}/>
          </Grid>

          <Grid item xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12} className='collapsable-form-style-multiline'>
          <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                name='treatmentGoal'
                defaultValue={type=='display'?patientDataDiplay.supplementsOrDrugs:patient.supplementsOrDrugs}
                disabled={type=='display'}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    supplementsOrDrugs: event.target.value,
                  }));
                }}
                />
            </Grid>
            
      </Grid>
    </form>
        </>
    )
}