import * as React from 'react';
import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import { useFormik } from "formik";
import * as yup from "yup";
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import PatientDetails from './PatientDetails';

interface Patient {
    fullName: string;
    homePhone: string;
    cellPhone: string;
    email: string;
    age: number | string;
    dateOfBirth: string;
    socialSecurityNumber: string;
    mailingAddress: string;
    city: string;
    state: string;
    zipCode: string;
    gender: string;
    maritalStatus: string;
}
  
interface Props {
    personalData: Patient;
}

export default function PersonalSection({personalData} : Props){
    return(
        <>
        <Grid container direction="row" className='section1-test-class'>
            <Grid item xs={4} className='collapsable-form-style '>
             <TextField
                    variant="outlined"
                    label="Patient's Full Name"
                    name="fullName"
                    placeholder='Please enter your name'
                    value={personalData.fullName}
                    disabled
                />
                </Grid>
               
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    required
                    variant="outlined"
                    label="Phone Number"
                    name="cellPhone"
                    placeholder='Please enter your cell Phone number'
                    value={personalData.cellPhone}
                    disabled
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Home Phone Number"
                    name="homePhone"
                    placeholder='Please enter your home phone'
                    value={personalData.homePhone}
                    disabled
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Email"
                    name="email"
                    placeholder='Please enter your email'
                    value={personalData.email}
                    disabled
                />
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    required
                    variant="outlined"
                    label="Age"
                    name="age"
                    type="number"
                    placeholder='Please enter your age'
                    value={personalData.age}
                    disabled
                />
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                <FormControl >
                    <TextField
                        variant="outlined"
                        label="Date of birth"
                        name="dob"
                        value={personalData.dateOfBirth}
                        disabled
                    />  
                </FormControl>
            
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        variant="outlined"
                        label="Social Security Number"
                        name="socialSecurityNumber"
                        value={personalData.socialSecurityNumber}
                        disabled
                    />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        required
                        variant="outlined"
                        label="Mailing Address"
                        name="mailingAddress"
                        value={personalData.mailingAddress}
                        disabled
                    />
                </Grid>                
            
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="State"
                    name="state"
                    value={personalData.state}
                    disabled
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        required
                        variant="outlined"
                        label="City"
                        name="city"
                        value={personalData.city}
                        disabled
                    />
                </Grid>
                
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Zip Code"
                    name="zipCode"
                    value={personalData.zipCode}
                    disabled
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
                <FormControl >
                <FormLabel>Gender</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue="male"
                    name="radio-buttons-group"
                    sx={{ display: 'flex', flexDirection: 'row' }}
                >
                    <FormControlLabel value="male" control={<Radio />} label="Male" checked={personalData.gender === 'male'} />
                    <FormControlLabel value="female" control={<Radio />} label="Female" checked={personalData.gender === 'female'} />
                </RadioGroup>
                </FormControl>
                </Grid>
            </Grid>       
        </>
    )
}