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

const validationSchema = yup.object({
  maritalStatus:yup.string().required("Marital Status is required"),
  numberOfChildren:yup.string().required("Full name is required"),
  ages:yup.string().required("Full name is required"),
  occupation:yup.string().required("Occupation is required"),
//   hoursPerWeek: yup.number().required('Required'),
//   employer:yup.string().required("Full name is required"),
//   businessPhone:yup.string().required("Full name is required"),
  spouseName:yup.string().required("Spouse name is required"),
//   spouseEmployer:yup.string().required("Full name is required"),
//   spouseBusinessPhone:yup.string().required("Full name is required"),
  emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
  relationship:yup.string().required("Relationship is required"),
  spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
});

export default function FamilyFormSection(){
    const formik = useFormik<FormValues>({
        initialValues:{
            maritalStatus:'',
            numberOfChildren:'',
            ages:'',
            occupation:'',
            hoursPerWeek:'',
            employer:'',
            businessPhone:'',
            spouseName:'',
            spouseEmployer:'',
            spouseBusinessPhone:'',
            emergencyContact:'',
            relationship:'',
            spousePhone:''
        },
        validationSchema,
        onSubmit:(values)=>{
            console.log(values);
        }
    })
    return(
        <>
        <form onSubmit={formik.handleSubmit}>
        <Grid container direction="row">
            <Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}>
            <FormControl>
            <FormLabel>Marital Status</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue="married"
                    name="maritalStatus"
                    onChange={formik.handleChange}
                    value={formik.values.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>
                {formik.touched.maritalStatus && formik.errors.maritalStatus ? (
                    <div>{formik.errors.maritalStatus}</div>
                ) : null}
            </FormControl>
            </Grid>
           
            <Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                <TextField 
                required
                variant="filled" 
                label="Number of Children/Ages" 
                className='collapsable-form-style'
                name='numberOfChildren'
                onChange={formik.handleChange}
                value={formik.values.numberOfChildren}
                onBlur={formik.handleBlur}
                error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
                helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                <TextField 
                required
                variant="filled" 
                label="Occupation" 
                className='collapsable-form-style'
                name='occupation'
                onChange={formik.handleChange}
                value={formik.values.occupation}
                onBlur={formik.handleBlur}
                error={formik.touched.occupation && Boolean(formik.errors.occupation)}
                helperText={formik.touched.occupation && formik.errors.occupation}
                />
               
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                 <TextField 
                 variant="filled" 
                 label="Hours/Week" 
                 type="number" 
                 className='collapsable-form-style'
                 name='hoursPerWeek'
                 onChange={formik.handleChange}
                 value={formik.values.hoursPerWeek}
                 onBlur={formik.handleBlur}
                 />
                 
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                <TextField 
                variant="filled" 
                label="Employer" 
                className='collapsable-form-style'
                name='employer'
                onChange={formik.handleChange}
                value={formik.values.employer}
                onBlur={formik.handleBlur}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                <TextField 
                variant="filled" 
                label="Business Phone" 
                type="tel" 
                className='collapsable-form-style'
                name='businessPhone'
                onChange={formik.handleChange}
                value={formik.values.businessPhone}
                onBlur={formik.handleBlur}
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                 <TextField 
                 variant="filled" 
                 label="Spouse's Name" 
                 className='collapsable-form-style'
                 name='spouseName'
                 onChange={formik.handleChange}
                 value={formik.values.spouseName}
                 onBlur={formik.handleBlur}
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                 <TextField 
                 variant="filled" 
                 label="Spouse's Employer" 
                 className='collapsable-form-style'
                 name='spouseEmployer'
                 onChange={formik.handleChange}
                 value={formik.values.spouseEmployer}
                 onBlur={formik.handleBlur}
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                  <TextField 
                  variant="filled" 
                  label="Business Phone" 
                  type="tel" 
                  className='collapsable-form-style'
                  name='spouseBusinessPhone'
                  onChange={formik.handleChange}
                  value={formik.values.spouseBusinessPhone}
                  onBlur={formik.handleBlur}
                  />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                   <TextField 
                   variant="filled" 
                   label="Emergency Contact" 
                   className='collapsable-form-style'
                   name='emergencyContact'
                   onChange={formik.handleChange}
                   value={formik.values.emergencyContact}
                   onBlur={formik.handleBlur}
                   />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                    <TextField 
                    variant="filled" 
                    label="Relationship" 
                    className='collapsable-form-style'
                    name='relationship'
                    onChange={formik.handleChange}
                    value={formik.values.relationship}
                    onBlur={formik.handleBlur}
                    />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style textfield-padding'>
                     <TextField 
                     variant="filled" 
                     label="Spouse's Phone" type="tel" 
                     className='collapsable-form-style'
                     name='phone'
                     onChange={formik.handleChange}
                     value={formik.values.spousePhone}
                     onBlur={formik.handleBlur}
                     />
            </Grid>
        </Grid>
        </form>
        </>
    )
};