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';

interface FormValues {
  physicianname: string;
  physiciancity: string;
  physicianstate: string;
  physicianphone: string;
  chiropractorName: string;
  chiropractorState: string;
  xray: boolean;
  ctScan: boolean;
  cdImages: boolean;
  visitDetails: string;
  cellPhoneProvider: string;
}

const validationSchema = Yup.object({
  familyphysician: Yup.string().required('Required'),
  city: Yup.string().required('Required'),
  state: Yup.string().required('Required'),
  phone: Yup.string().required('Required'),
  chiropractorName: Yup.string().required('Required'),
  xray: Yup.boolean().required('Required'),
  ctScan: Yup.boolean().required('Required'),
  cdImages: Yup.boolean().required('Required'),
  visitDetails: Yup.string().required('Required'),
  cellPhoneProvider: Yup.string().required('Required'),
});

export default function MedicalHistoryForm(){
    const formik = useFormik<FormValues>({
        initialValues:{
            physicianname: '',
            physiciancity: '',
            physicianstate: '',
            physicianphone: '',
            chiropractorName: '',
            chiropractorState: '',
            xray: false,
            ctScan: false,
            cdImages: false,
            visitDetails: '',
            cellPhoneProvider: '',
        },
        validationSchema,
        onSubmit:(values)=>{
            console.log(values);
        }
    })
    return(
        <>
        <form onSubmit={formik.handleSubmit}>
        <Grid item xs={12} className='collapsable-form-style '> 
            <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
        </Grid>

        <Grid container direction="row">
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Family physician" 
                name='physicianname'
                onChange={formik.handleChange}
                value={formik.values.physicianname}
                onBlur={formik.handleBlur}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="City" 
                name='physiciancity'
                onChange={formik.handleChange}
                value={formik.values.physiciancity}
                onBlur={formik.handleBlur}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="State" 
                 name='physicianstate'
                 onChange={formik.handleChange}
                 value={formik.values.physicianstate}
                 onBlur={formik.handleBlur}
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Phone" 
                type="number"
                name='physicianphone'
                onChange={formik.handleChange}
                value={formik.values.physicianphone}
                onBlur={formik.handleBlur}
                />
            </Grid>
            
            <Grid item xs={4} className='collapsable-form-style'></Grid>
            <Grid item xs={4} className='collapsable-form-style'></Grid>

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

            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                <FormControl>
                <FormLabel>Previous Chiropractic Care:</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue="yes"
                    name="radio-buttons-group"
                    onChange={formik.handleChange}
                    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={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Chiropractor's Name" 
                 name='chiropractorName'
                 onChange={formik.handleChange}
                 value={formik.values.chiropractorName}
                 onBlur={formik.handleBlur}
                 />
            </Grid>

            <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City/State" 
                 name='chiropractorState'
                 onChange={formik.handleChange}
                 value={formik.values.chiropractorState}
                 onBlur={formik.handleBlur}
                 />
            </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="yes"
                    name="radio-buttons-group"
                    onChange={formik.handleChange}
                    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-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="physician"
                    name="radio-buttons-group"
                    onChange={formik.handleChange}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
                    <FormControlLabel value="google" control={<Radio />} label="Google" />
                    <FormControlLabel 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="email"
                    name="radio-buttons-group"
                    onChange={formik.handleChange}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="email" control={<Radio />} label="Email" />
                    <FormControlLabel value="text" control={<Radio />} label="Text" />
                </RadioGroup>
            </FormControl>
        </Grid>
        </form>
        </>
    )}