import { useState } from "react";
import { useParams } from "react-router-dom";
import Button from "./Button";

export default function ChangeRoles(): JSX.Element {
  const [selectedRole, setSelectedRole] = useState("");
  const { username } = useParams();

  const handleRoleChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ): void => {
    setSelectedRole(event.target.value);
  };

  //   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  //     event.preventDefault();

  //     const response = await api.changeRole(username, selectedRole, token);
  //     if (response.success) {
  //       console.log("Role changed successfully");
  //     } else {
  //       console.error("Failed to change role:", response.message);
  //     }
  //   };

  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        Change roll for: {username}
      </h1>
      <form
        className="text-[20px] font-bold border-4 border-black bg-white flex flex-col items-center justify-center min-h-[50vh] h-fit w-[30vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]"
        onSubmit={undefined}
      >
        <div className="self-start">
          <div>
            <label>
              <input
                type="radio"
                value="System Manager"
                checked={selectedRole === "System Manager"}
                onChange={handleRoleChange}
                className="ml-2 mr-2 mb-6"
              />
              System Manager
            </label>
          </div>
          <div>
            <label>
              <input
                type="radio"
                value="Developer"
                checked={selectedRole === "Developer"}
                onChange={handleRoleChange}
                className="ml-2 mr-2 mb-6"
              />
              Developer
            </label>
          </div>
          <div>
            <label>
              <input
                type="radio"
                value="Tester"
                checked={selectedRole === "Tester"}
                onChange={handleRoleChange}
                className="ml-2 mr-2 mb-6"
              />
              Tester
            </label>
          </div>
        </div>
        <Button
          text="Save"
          onClick={(): void => {
            return;
          }}
          type="submit"
        />
      </form>
    </>
  );
}