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
  }
  

export default function PainAnalysisSection4({handleFormSection4Data}: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={4} 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={patient.chiefComplaint}
                />
            </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" />}
                            label="Bending"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorseChange} name="Standing" />}
                            label="Standing"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorseChange} name="Sitting" />}
                            label="Sitting"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorseChange} name="Walking" />}
                            label="Walking"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorseChange} name="Others" />}
                            label="Others"
                        />
                    </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" />}
                            label="laying down"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainBetterChange} name="Standing" />}
                            label="Standing"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainBetterChange} name="Sitting" />}
                            label="Sitting"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainBetterChange} name="Walking" />}
                            label="Walking"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainBetterChange} name="Others" />}
                            label="Others"
                        />
                    </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" />}
                            label="Sharp"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainQualityChange} name="Dull/Ache" />}
                            label="Dull/Ache"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainQualityChange} name="Throbbing" />}
                            label="Throbbing"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainQualityChange} name="Tingling/Numbness/Burning" />}
                            label="Tingling/Numbness/Burning"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainQualityChange} name="Others" />}
                            label="Others"
                        />
                    </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" />}
                            label="Morning"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorstTimeChange} name="During day" />}
                            label="During day"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Evening" />}
                            label="Evening"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Lying in bed" />}
                            label="Lying in bed"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handlePainWorstTimeChange} name="Others" />}
                            label="Others"
                        />
                    </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={patient.painDuration}
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <FormControlLabel value="0-25%" control={<Radio />} label="0-25%" />
                        <FormControlLabel value="25-50%" control={<Radio />} label="25-50%" />
                        <FormControlLabel value="50-75%" control={<Radio />} label="50-75%" />
                        <FormControlLabel 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" />}
                            label="Muscle weakness"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Bowel/Bladder problem" />}
                            label="Bowel/Bladder problem"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Digestion" />}
                            label="Digestion"
                        />
                        <FormControlLabel
                            control={<Checkbox onChange={handleCurrentComplaintIssuesTimeChange} name="Cardiac/Respiratory" />}
                            label="Cardiac/Respiratory"
                        />
                       
                    </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={patient.selfTreatment}
                        sx={{display:'flex', flexDirection:'row'}}
                        >
                        <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' sx={{marginTop:3 }}> 
                <FormLabel sx={{fontWeight:600}}>Expected Treatment Result:</FormLabel>
            </Grid>

            <Grid item xs={4} 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={patient.treatmentGoal}
                />
            </Grid>
          
        </Grid>

        </>
    )}