import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, 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';

interface FormValues {
  maritalStatus: string;
  numberOfChildren: string;
  ages: string;
  occupation: string;
  hoursPerWeek: number | string;
  employer: string;
  businessPhone: string;
  spouseName: string;
  spouseEmployer: string;
  spouseBusinessPhone: string;
  emergencyContact: string;
  relationship: string;
  spousePhone: string;
}

interface Props {
    familyDetails: FormValues;
}

export default function FamilyFormSection({familyDetails}:Props){
    return(
        <>
        <Grid container direction="row">
            <Grid item xs={8} className='collapsable-form-style-radioButtons'>
            <FormControl>
            <FormLabel>Marital Status</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue="married"
                    name="maritalStatus"
                    value={familyDetails.maritalStatus}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="married" control={<Radio />} label="Married" />
                    <FormControlLabel value="single" control={<Radio />} label="Single" />
                    <FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
                    <FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
                    <FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
                </RadioGroup>
                
            </FormControl>
            </Grid>
           
            <Grid item xs={4} className='collapsable-form-style '></Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                <TextField 
                    variant="outlined" 
                    type="number"
                    label="Number of Children/Ages" 
                    className='collapsable-form-style'
                    name='numberOfChildren'
                    value={familyDetails.numberOfChildren}
                    disabled
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                <TextField 
                    variant="outlined" 
                    label="Occupation" 
                    className='collapsable-form-style'
                    name='occupation'
                    value={familyDetails.occupation}
                    disabled
                />
               
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
                    variant="outlined" 
                    label="Hours/Week" 
                    type="number" 
                    className='collapsable-form-style'
                    name='hoursPerWeek'
                    value={familyDetails.hoursPerWeek}
                    disabled
                 />
                 
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                <TextField 
                    variant="outlined" 
                    label="Employer" 
                    className='collapsable-form-style'
                    name='employer'
                    value={familyDetails.employer}
                    disabled
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                <TextField 
                    variant="outlined" 
                    label="Business Phone" 
                    type="number"
                    className='collapsable-form-style'
                    name='businessPhone'    
                    value={familyDetails.businessPhone}
                    disabled
                />
            </Grid>

            <Grid item xs={4} className='collapsable-form-style '></Grid>

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

            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
                    variant="outlined" 
                    label="Spouse's Name" 
                    className='collapsable-form-style'
                    name='spouseName'
                    value={familyDetails.spouseName}
                    disabled
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                 <TextField 
                    variant="outlined" 
                    label="Spouse's Employer" 
                    className='collapsable-form-style'
                    name='spouseEmployer'
                    value={familyDetails.spouseEmployer}
                    disabled
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                  <TextField 
                    variant="outlined" 
                    label="Business Phone" 
                    type="number"
                    className='collapsable-form-style'
                    name='spouseBusinessPhone'
                    value={familyDetails.spouseBusinessPhone}
                    disabled
                  />
            </Grid>
            
            <Grid item xs={12} className='collapsable-form-style '> 
                <FormLabel sx={{fontWeight:600}}>Emergency:</FormLabel>
            </Grid>
           

            <Grid item xs={4} className='collapsable-form-style '>
                   <TextField 
                        variant="outlined" 
                        label="Emergency Contact" 
                        type="number"
                        className='collapsable-form-style'
                        name='emergencyContact'
                        value={familyDetails.emergencyContact}
                        disabled
                   />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                    <TextField 
                        variant="outlined" 
                        label="Relationship" 
                        className='collapsable-form-style'
                        name='relationship'
                        value={familyDetails.relationship}
                        disabled
                    />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style '>
                     <TextField 
                        variant="outlined" 
                        type="number"
                        label="Phone" 
                        className='collapsable-form-style'
                        name='spousePhone'
                        value={familyDetails.spousePhone}
                        disabled
                     />
            </Grid>
        </Grid>
        </>
    )
};