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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Eyes</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Intestines/Bowls</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Joints/Bones</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Allergies</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Urinary</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Skin</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Psychological/Emotional</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Heart</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Muscles</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Internal Organs</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Gynecological menstrual/Brest</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Lungs/Breathing</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Nerves</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Blood</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display' ? patientDataDiplay && 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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Prostate/Testicular/Penile</FormLabel>
            <RadioGroup
              name='painDuration'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && 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={12}
          xl={10}
          lg={10}
          md={10}
          sm={12}
          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 && patientDataDiplay.explanation
                : patient.explanation
            }
            disabled={type == 'display'}
            onChange={(event: any) => {
              setPatients((prevValues) => ({
                ...prevValues,
                explanation: event.target.value,
              }));
            }}
          />
        </Grid>
      </Grid>
    </>
  );
}