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 { useEffect } from 'react';

interface Patient {
  physicianname: string |undefined;
  physiciancity: string |undefined;
  physicianstate: string |undefined;
  physicianphone: string |undefined;
  chiropractorName: string |undefined;
  chiropractorState: string |undefined;
  xray: string|undefined;
  haveChiropractor: string|undefined;
  reference: string|undefined;
  visitDetails: string |undefined;
  cellPhoneProvider: string |undefined;
}

type Props = {
    handleFormSection3Data:(
        physicianname?: string |undefined,
        physiciancity?: string |undefined,
        physicianstate?: string |undefined,
        physicianphone?: string |undefined,
        chiropractorName?: string |undefined,
        chiropractorState?: string |undefined,
        xray?: string|undefined,
        haveChiropractor?: string|undefined,
        reference?: string|undefined,
        visitDetails?: string |undefined,
        cellPhoneProvider?: string |undefined,
    )=> void
    patientDataDiplay:any;
    type:string;
  }

export default function MedicalHistoryForm({handleFormSection3Data,patientDataDiplay,type}:Props){
    
    const [patient, setPatient] = React.useState<Patient>({
        physicianname: '',
        physiciancity: '',
        physicianstate: '',
        physicianphone: '',
        chiropractorName: '',
        chiropractorState: '',
        xray: '',
        haveChiropractor: '',
        reference: '',
        visitDetails: '',
        cellPhoneProvider: '',
      });
   
      useEffect(()=>{
        handleFormSection3Data(
            patient.physicianname,
            patient.physiciancity,
            patient.physicianstate,
            patient.physicianphone,
            patient.chiropractorName,
            patient.chiropractorState,
            patient.xray,
            patient.haveChiropractor,
            patient.reference,
            patient.visitDetails,
            patient.cellPhoneProvider,
        )
      },[patient])

    return(
        <>
        <Grid item xs={12} className='collapsable-form-style '> 
            <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
        </Grid>

        <Grid container direction="row">
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Family physician" 
                name='physicianname'
                onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        physicianname: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianname:patient.physicianname}
                disabled={type=='display'}
                />
            </Grid>
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="City" 
                name='physiciancity'
                onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        physiciancity: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.physiciancity:patient.physiciancity}
                disabled={type=='display'}
                />
            </Grid>
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="State" 
                 name='physicianstate'
                 onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        physicianstate: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianstate:patient.physicianstate}
                disabled={type=='display'}
                 />
            </Grid>
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Phone" 
                type="number"
                name='physicianphone'
                onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        physicianphone: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.physicianphone:patient.physicianphone}
                disabled={type=='display'}
                />
            </Grid>
            
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12} className='collapsable-form-style'></Grid>
            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12} className='collapsable-form-style'></Grid>

            <Grid item xs={12} className='collapsable-form-style '> 
                <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
            </Grid>

            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                <FormControl>
                <FormLabel>Previous Chiropractic Care:</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.haveChiropractor:patient.haveChiropractor}
                    name="radio-buttons-group"
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            haveChiropractor: e.target.value,
                          }));
                    }}
                    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}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Chiropractor's Name" 
                 name='chiropractorName'
                 onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        chiropractorName: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorName:patient.chiropractorName}
                disabled={type=='display'}
                 />
            </Grid>

            <Grid item 
            xs={12}
            xl={3}
            lg={4}
            md={6}
            sm={12}
             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City/State" 
                 name='chiropractorState'
                 onChange={(e)=>{
                    setPatient((prevValues) => ({
                        ...prevValues,
                        chiropractorState: e.target.value,
                      }));
                }}
                value={type=='display'? patientDataDiplay && patientDataDiplay.chiropractorState:patient.chiropractorState}
                disabled={type=='display'}
                 />
            </Grid>
        </Grid>

        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
            <FormControl>
                <FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.xray:patient.xray}
                    name="radio-buttons-group"
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            xray: e.target.value,
                          }));
                    }}
                    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-radioButtons-fullwidth'>
                <FormControl>
                <FormLabel>Who can we thank for referring you to our office:</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.reference:patient.reference}
                    name="radio-buttons-group"
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            reference: e.target.value,
                          }));
                    }}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel disabled={type=='display'} value="friend" control={<Radio />} label="Friend" />
                    <FormControlLabel disabled={type=='display'} value="relative" control={<Radio />} label="Relative" />
                    <FormControlLabel disabled={type=='display'} value="physician" control={<Radio />} label="Physician" />
                    <FormControlLabel disabled={type=='display'} value="instagram" control={<Radio />} label="Instagram" />
                    <FormControlLabel disabled={type=='display'} value="google" control={<Radio />} label="Google" />
                    <FormControlLabel disabled={type=='display'} value="others" control={<Radio />} label="Others" />
                </RadioGroup>
            </FormControl>
        </Grid>

        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
            <FormControl>
                <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue={type=='display'? patientDataDiplay && patientDataDiplay.cellPhoneProvider:patient.cellPhoneProvider}
                    name="radio-buttons-group"
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            cellPhoneProvider: e.target.value,
                          }));
                    }}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel disabled={type=='display'} value="email" control={<Radio />} label="Email" />
                    <FormControlLabel disabled={type=='display'} value="text" control={<Radio />} label="Text" />
                </RadioGroup>
            </FormControl>
        </Grid>
        </>
    )}