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

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

  const validationSchema = yup.object({
    fullName: yup.string().required("Full name is required"),
    homePhone: yup.string().matches(/^\d{10}$/, "Home phone must be 10 digits"),
    cellPhone: yup.string().required("Phone number is required").matches(/^\d{10}$/, "Cell phone must be 10 digits"),
    email: yup.string().required("Email is required"),
    age: yup.number().positive().integer("Age must be a positive integer").required("Age is required"),
    dateOfBirth: yup.date().required("Date of birth is required"),
    socialSecurityNumber: yup.string(),
    mailingAddress: yup.string().required("Mailing address is required"),
    city: yup.string().required("City is required"),
    state: yup.string().required("State is required"),
    zipCode: yup.string().matches(/^\d{6}$/, "Zip code must be 6 digits").required("Zip code is required")
  });

export default function PersonalSection(){

    const [startDateValue, setStartDateValue] = React.useState<any>();
    const [emailValue, setEmailValue]= React.useState<string>('');
    const [patient, setPatient] = React.useState<Patient>({
        fullName: "",
        homePhone: "",
        cellPhone: "",
        email: "",
        age: 0,
        dateOfBirth: "",
        socialSecurityNumber: "",
        mailingAddress:"",
        city: "",
        state: "",
        zipCode: "",
        gender: "male",
        maritalStatus: "",
      });

      const formik = useFormik<Patient>({
        initialValues: {
          fullName: "",
          homePhone: "",
          cellPhone: "",
          email: "",
          age: "",
          dateOfBirth: "",
          socialSecurityNumber: "",
          mailingAddress:"",
          city: "",
          state: "",
          zipCode: "",
          gender: "male",
          maritalStatus: "",
        },
        validationSchema,
        onSubmit: (values) => {
          // Do something with the patient data
          console.log(values);
        },
      });
    
      const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log("dsfsdfsdf",event.target.value)
        const { name, value } = event.target;
        setPatient((prevPatient) => ({
          ...prevPatient,
          [name]: value,
        }));
      };
    
    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={formik.values.fullName}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.fullName && Boolean(formik.errors.fullName)}
                    helperText={formik.touched.fullName && formik.errors.fullName}
                    required
                />
                </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={formik.values.cellPhone}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.cellPhone && Boolean(formik.errors.cellPhone)}
                    helperText={formik.touched.cellPhone && formik.errors.cellPhone}
                />
                </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={formik.values.homePhone}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.homePhone && Boolean(formik.errors.homePhone)}
                    helperText={formik.touched.homePhone && formik.errors.homePhone}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Email"
                    name="email"
                    placeholder='Please enter your email'
                    value={emailValue}
                    onChange={(e)=>{
                        setEmailValue(e.target.value)
                    }}
                    onBlur={formik.handleBlur}
                    // error={formik.touched.email && Boolean(formik.errors.email)}
                    // helperText={formik.touched.email && formik.errors.email}
                />
                </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={formik.values.age}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.age && Boolean(formik.errors.age)}
                    helperText={formik.touched.age && formik.errors.age}
                />
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                <FormControl >
        
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                    label="Date of Birth"
                    value={startDateValue}
                    onChange={(newValue) => {
                        setStartDateValue(newValue);
                    }}
                    renderInput={(params) => <TextField required  variant="outlined" {...params} />}
                    />
                </LocalizationProvider>
                </FormControl>
            
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Social Security Number"
                    name="socialSecurityNumber"
                    value={formik.values.socialSecurityNumber}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
                    helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        required
                        variant="outlined"
                        label="Mailing Address"
                        name="mailingAddress"
                        value={formik.values.mailingAddress}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error={formik.touched.mailingAddress && Boolean(formik.errors.mailingAddress)}
                        helperText={formik.touched.mailingAddress && formik.errors.mailingAddress}
                    />
                </Grid>                
            
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="State"
                    name="state"
                    value={formik.values.state}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    // error={formik.touched.state && Boolean(formik.errors.state)}
                    // helperText={formik.touched.state && formik.errors.state}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        required
                        variant="outlined"
                        label="City"
                        name="city"
                        value={formik.values.city}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        error={formik.touched.city && Boolean(formik.errors.city)}
                        helperText={formik.touched.city && formik.errors.city}
                    />
                </Grid>
                
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Zip Code"
                    name="zipCode"
                    value={formik.values.zipCode}
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
                    helperText={formik.touched.zipCode && formik.errors.zipCode}
                />
                </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"
                    onChange={handleChange}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="male" control={<Radio />} label="Male" />
                    <FormControlLabel value="female" control={<Radio />} label="Female" />
                </RadioGroup>
                </FormControl>
                </Grid>
            </Grid>       
        </>
    )
}