import { useReducer } from "react";

export default function App() {
  const formReducer = (state, action) => {
    switch (action.type) {
      case "HandleInputText": {
        return {
          ...state,
          [action.field]: action.payload
        };
      }
      case "ToggleConsent": {
        return {
          ...state,
          hasConsented: !state.hasConsented
        };
      }
      default:
        return state;
    }
  };

  const initialState = {
    username: "",
    email: "",
    password: "",
    hasConsented: false,
    gender: "male"
  };

  const [formState, dispatch] = useReducer(formReducer, initialState);
  console.log(formState);
  // where dispatch is a method to trigger state updates/changes, reducer is a function we define which controls how we change the state, and initial state is an object with initial values defined, like the initialFormState example above.
  const handleChange = (e) => {
    dispatch({
      type: "HandleInputText",
      field: e.target.name,
      payload: e.target.value
    });
  };

  return (
    <div className="App">
      <h1> Reducer with form </h1>
      <label>User Name </label>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={(e) => handleChange(e)}
      />{" "}
      <br />
      <label>Email </label>
      <input
        type="text"
        name="email"
        value={formState.email}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Password </label>
      <input
        type="text"
        name="password"
        value={formState.password}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Gender </label>
      <div onChange={(e) => handleChange(e)}>
        <input
          type="radio"
          value="Male"
          name="gender"
          checked={formState.gender === "male"}
        />{" "}
        Male
        <input
          type="radio"
          value="Female"
          name="gender"
          checked={formState.gender === "female"}
        />{" "}
        Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
      <br />
      <label> i hearby Govind declare this that the code runs in react App </label>
      <input
        type="checkbox"
        checked={formState.hasConsented}
        onChange={() => dispatch({ type: "ToggleConsent" })}
      />
      <button onClick={() => console.log("printing", formState)}>
        print on console
      </button>
    </div>
  );
}