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 Health is:</FormLabel>
              <RadioGroup
                name='painDuration'
                defaultValue={
                  type == 'display'
                    ? patientDataDiplay && 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 && 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 && 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 && 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 && patientDataDiplay.strokeBloodclotting
                    : patient.strokeBloodclotting
                }
                value={
                  type == 'display'
                    ? patientDataDiplay && 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={12}
            xl={10}
            lg={10}
            md={10}
            sm={12}
            className='collapsable-form-style-form7'
          >
            <TextField
              variant='outlined'
              label='If yes, when?'
              name='treatmentGoal'
              value={
                type == 'display'
                  ? patientDataDiplay && 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 && 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={12}
            xl={10}
            lg={10}
            md={10}
            sm={12}
            className='collapsable-form-style-form7'
          >
            <TextField
              variant='outlined'
              label='If yes, when?'
              name='treatmentGoal'
              disabled={patient.dizzinessFetigue !== 'Yes'}
              value={
                type == 'display'
                  ? patientDataDiplay && 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 && 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 && 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 && patientDataDiplay.supplementsOrDrugs
                  : patient.supplementsOrDrugs
              }
              disabled={type == 'display'}
              onChange={(event) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  supplementsOrDrugs: event.target.value,
                }));
              }}
            />
          </Grid>
        </Grid>
      </form>
    </>
  );
}