import React, { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateFamilyDetails } from "../redux/registrationFormSlice";
import {
  Grid,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
} from "@mui/material";

const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.registerform.familyDetails);
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleChange = (field, value) => {
    dispatch(updateFamilyDetails({ [field]: value }));
  };

  const handleSubmit = () => {
    console.log("Submitting family details:", data);
    onSubmitStep();
  };

  return (

    <>
    
    <div className="w-full max-w-[1200px] mx-auto bg-[#fff2f2] py-6 md:px-2 rounded-8">
        <form noValidate autoComplete="off" style={{ padding: 16 }}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-10 mb-6">
            {/* Highest Qualification */}
            <div className="flex flex-col gap-4">
<label className="text-gray-900 text-[15px]">Enter Father Name</label>
<TextField
            fullWidth
            inputRef={inputRef}
            name="fatherName"
            label="Father Name"
            value={data.fatherName}
            onChange={(e) => handleChange("fatherName", e.target.value)}
            error={Boolean(errors.fatherName)}
            helperText={errors.fatherName}
            placeholder="Enter Father Name"
            variant="outlined"
          />
            </div>

             <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">Enter Father Occupation</label>


  <TextField
            fullWidth
            name="fatherOccupation"
            label="Father Occupation"
            value={data.fatherOccupation}
            onChange={(e) => handleChange("fatherOccupation", e.target.value)}
            error={Boolean(errors.fatherOccupation)}
            helperText={errors.fatherOccupation}
            placeholder="Enter Father Occupation"
            variant="outlined"
          />
             </div>

              <div className="flex flex-col gap-4">
                 <label className="text-gray-900 text-[15px]">Enter Mother Name</label>
 <TextField
            fullWidth
            name="motherName"
            label="Mother Name"
            value={data.motherName}
            onChange={(e) => handleChange("motherName", e.target.value)}
            error={Boolean(errors.motherName)}
            helperText={errors.motherName}
            placeholder="Enter Mother Name"
            variant="outlined"
          />

              </div>
 <div className="flex flex-col gap-4">
                   <label className="text-gray-900 text-[15px]">Enter Mother Occupation</label>

  <TextField
            fullWidth
            name="motherOccupation"
            label="Mother Occupation"
            value={data.motherOccupation}
            onChange={(e) => handleChange("motherOccupation", e.target.value)}
            error={Boolean(errors.motherOccupation)}
            helperText={errors.motherOccupation}
            placeholder="Enter Mother Occupation"
            variant="outlined"
          />

 </div>

 <div className="flex flex-col gap-4">
   <label className="text-gray-900 text-[15px]">Enter Number of Brothers / Sisters</label>
  <TextField
            fullWidth
            name="siblings"
            label="Number of Brothers / Sisters"
            value={data.siblings}
            onChange={(e) => handleChange("siblings", e.target.value)}
            error={Boolean(errors.siblings)}
            helperText={errors.siblings}
            placeholder="Enter Number of Brothers / Sisters"
            variant="outlined"
          />

 </div>

 <div className="flex flex-col gap-4">
  <label className="text-gray-900 text-[15px]">  Brothers / Sisters (Married / Unmarried)</label>
 <FormControl
            fullWidth
            variant="outlined"
            error={Boolean(errors.siblingsStatus)}
          >
            <InputLabel id="siblingsStatus-label">
              Brothers / Sisters (Married / Unmarried)
            </InputLabel>
            <Select
              labelId="siblingsStatus-label"
              label="Brothers / Sisters (Married / Unmarried)"
              name="siblingsStatus"
              value={data.siblingsStatus}
              onChange={(e) => handleChange("siblingsStatus", e.target.value)}
            >
              
              <MenuItem value="All Married">All Married</MenuItem>
              <MenuItem value="All Unmarried">All Unmarried</MenuItem>
              <MenuItem value="Mixed">Mixed</MenuItem>
            </Select>
            {errors.siblingsStatus && (
              <p
                style={{
                  color: "#d32f2f",
                  margin: "3px 14px 0 14px",
                  fontSize: "0.75rem",
                }}
              >
                {errors.siblingsStatus}
              </p>
            )}
          </FormControl>

 </div>

 
            </div>

            <Grid  item
            xs={12} sx={{ marginTop: 10, display: "flex", gap: 4 , justifyContent: "center"}}>
          <Button variant="outlined"  onClick={onSkipStep}>
            Skip
          </Button>
          <Button variant="contained" color="primary" onClick={handleSubmit}>
            Submit
          </Button>
        </Grid>




        
            </form>
            </div>
    
    
    </>
   
  );
};

export default FamilyDetailsForm;
