import * as React from 'react';
import {
  Checkbox,
  FormControlLabel,
  TextField,
  FormGroup,
  Grid,
  FormControl,
  FormLabel,
  Radio,
  RadioGroup,
} from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import path from 'path';
import { useEffect } from 'react';

interface Patient {
  chiefComplaint: string;
  painWorse: string[];
  painBetter: string[];
  painQuality: string[];
  painWorstTime: string[];
  currentComplaintIssues: string[];
  painDuration: string;
  currentTreatment: string;
  treatmentGoal: string;
  selfTreatment: string;
}

type Props = {
  handleFormSection4Data: (
    chiefComplaint: string | undefined,
    painWorse: any,
    painBetter: any,
    painQuality: any,
    painWorstTime: any,
    currentComplaintIssues: any,
    painDuration: string | undefined,
    currentTreatment: string | undefined,
    treatmentGoal: string | undefined,
    selfTreatment: string | undefined
  ) => void;
  patientDataDiplay: any;
  type: string;
};

export default function PainAnalysisSection4({
  handleFormSection4Data,
  patientDataDiplay,
  type,
}: Props) {
  const [patient, setPatient] = React.useState<Patient>({
    chiefComplaint: '',
    painWorse: [],
    painBetter: [],
    painQuality: [],
    painWorstTime: [],
    currentComplaintIssues: [],
    painDuration: '',
    currentTreatment: '',
    treatmentGoal: '',
    selfTreatment: '',
  });

  useEffect(() => {
    handleFormSection4Data(
      patient.chiefComplaint,
      patient.painWorse,
      patient.painBetter,
      patient.painQuality,
      patient.painWorstTime,
      patient.currentComplaintIssues,
      patient.painDuration,
      patient.currentTreatment,
      patient.treatmentGoal,
      patient.selfTreatment
    );
  }, [patient]);

  const handlePainWorseChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, checked } = event.target;
    setPatient((prevValues) => ({
      ...prevValues,
      painWorse: checked
        ? [...prevValues.painWorse, name]
        : prevValues.painWorse.filter((item) => item !== name),
    }));
  };

  const handlePainBetterChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, checked } = event.target;
    setPatient((prevValues) => ({
      ...prevValues,
      painBetter: checked
        ? [...prevValues.painBetter, name]
        : prevValues.painBetter.filter((item) => item !== name),
    }));
  };

  const handlePainQualityChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, checked } = event.target;
    setPatient((prevValues) => ({
      ...prevValues,
      painQuality: checked
        ? [...prevValues.painQuality, name]
        : prevValues.painQuality.filter((item) => item !== name),
    }));
  };

  const handlePainWorstTimeChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, checked } = event.target;
    setPatient((prevValues) => ({
      ...prevValues,
      painWorstTime: checked
        ? [...prevValues.painWorstTime, name]
        : prevValues.painWorstTime.filter((item) => item !== name),
    }));
  };

  const handleCurrentComplaintIssuesTimeChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, checked } = event.target;
    setPatient((prevValues) => ({
      ...prevValues,
      currentComplaintIssues: checked
        ? [...prevValues.currentComplaintIssues, name]
        : prevValues.currentComplaintIssues.filter((item) => item !== name),
    }));
  };

  return (
    <>
      <Grid item xs={12} className='collapsable-form-style '>
        <FormLabel sx={{ fontWeight: 600 }}>Issue Details:</FormLabel>
      </Grid>
      <Grid container direction='row'>
        <Grid
          item
          xs={12}
          xl={10}
          lg={10}
          md={10}
          sm={12}
          className='collapsable-form-style-form7'
        >
          <TextField
            variant='outlined'
            label='How did your Chief complaint start?(ex-fell on ice)'
            name='chiefComplaint'
            onChange={(e) => {
              setPatient((prevValues) => ({
                ...prevValues,
                chiefComplaint: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.chiefComplaint
                : patient.chiefComplaint
            }
            disabled={type == 'display'}
          />
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>What makes your pain worse?</FormLabel>
            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
                }
                label='Bending'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
                }
                label='Standing'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
                }
                label='Sitting'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
                }
                label='Walking'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
                }
                label='Others'
                disabled={type == 'display'}
              />
            </FormGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>What makes your pain better?</FormLabel>
            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainBetterChange}
                    name='laying down'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
                  />
                }
                label='laying down'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
                }
                label='Standing'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
                }
                label='Sitting'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
                }
                label='Walking'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
                }
                label='Others'
                disabled={type == 'display'}
              />
            </FormGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>What is the quality of your pain?</FormLabel>
            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
                }
                label='Sharp'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
                }
                label='Dull/Ache'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainQualityChange}
                    name='Throbbing'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
                  />
                }
                label='Throbbing'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainQualityChange}
                    name='Tingling/Numbness/Burning'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
                  />
                }
                label='Tingling/Numbness/Burning'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
                }
                label='Others'
                disabled={type == 'display'}
              />
            </FormGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>What is the worst time for your pain?</FormLabel>
            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainWorstTimeChange}
                    name='Morning'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
                  />
                }
                label='Morning'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainWorstTimeChange}
                    name='During day'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
                  />
                }
                label='During day'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainWorstTimeChange}
                    name='Evening'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
                  />
                }
                label='Evening'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainWorstTimeChange}
                    name='Lying in bed'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
                  />
                }
                label='Lying in bed'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handlePainWorstTimeChange}
                    name='Others'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
                  />
                }
                label='Others'
                disabled={type == 'display'}
              />
            </FormGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>
              How much of the day do you experience your chief complaint?
            </FormLabel>
            <RadioGroup
              name='painDuration'
              onChange={(e) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  painDuration: e.target.value,
                }));
              }}
              value={
                type == 'display'
                  ? patientDataDiplay && patientDataDiplay.painDuration
                  : patient.painDuration
              }
              sx={{ display: 'flex', flexDirection: 'row' }}
            >
              <FormControlLabel
                disabled={type == 'display'}
                value='0-25%'
                control={<Radio />}
                label='0-25%'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='25-50%'
                control={<Radio />}
                label='25-50%'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='50-75%'
                control={<Radio />}
                label='50-75%'
              />
              <FormControlLabel
                disabled={type == 'display'}
                value='75-100%'
                control={<Radio />}
                label='75-100%'
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>
              Has your current complaint caused any of the following?
            </FormLabel>
            <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handleCurrentComplaintIssuesTimeChange}
                    name='Muscle weakness'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
                  />
                }
                label='Muscle weakness'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handleCurrentComplaintIssuesTimeChange}
                    name='Bowel/Bladder problem'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
                  />
                }
                label='Bowel/Bladder problem'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handleCurrentComplaintIssuesTimeChange}
                    name='Digestion'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
                  />
                }
                label='Digestion'
                disabled={type == 'display'}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    onChange={handleCurrentComplaintIssuesTimeChange}
                    name='Cardiac/Respiratory'
                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
                  />
                }
                label='Cardiac/Respiratory'
                disabled={type == 'display'}
              />
            </FormGroup>
          </FormControl>
        </Grid>

        <Grid
          item
          xs={12}
          className='collapsable-form-style-radioButtons-fullwidth'
        >
          <FormControl>
            <FormLabel>
              Have you tried any self treatment (ex-ice, heat, excercise) or
              taken any medication(over the counter or prescription)?
            </FormLabel>
            <RadioGroup
              name='painDuration'
              onChange={(e) => {
                setPatient((prevValues) => ({
                  ...prevValues,
                  selfTreatment: e.target.value,
                }));
              }}
              value={
                type == 'display'
                  ? patientDataDiplay && patientDataDiplay.selfTreatment
                  : patient.selfTreatment
              }
              sx={{ display: 'flex', flexDirection: 'row' }}
            >
              <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'
          sx={{ marginTop: 3 }}
        >
          <FormLabel sx={{ fontWeight: 600 }}>
            Expected Treatment Result:
          </FormLabel>
        </Grid>

        <Grid
          item
          xs={12}
          xl={10}
          lg={10}
          md={10}
          sm={12}
          className='collapsable-form-style-form7'
        >
          <TextField
            variant='outlined'
            label='What is your goal from treatment?(ex-play golf without pain)'
            name='treatmentGoal'
            onChange={(e) => {
              setPatient((prevValues) => ({
                ...prevValues,
                treatmentGoal: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.treatmentGoal
                : patient.treatmentGoal
            }
            disabled={type == 'display'}
          />
        </Grid>
      </Grid>
    </>
  );
}