import { useState } from "react";
import Button from "./Button";
import ChangeRole, { ProjectRoleChange } from "./ChangeRole";

export default function ChangeRoles(props: {
  projectName: string;
  username: string;
}): JSX.Element {
  const [selectedRole, setSelectedRole] = useState<
    "project_manager" | "member" | ""
  >("");

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

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    const roleChangeInfo: ProjectRoleChange = {
      username: props.username,
      projectname: props.projectName,
      role: selectedRole,
    };
    ChangeRole(roleChangeInfo);
  };

  return (
    <div className="overflow-auto rounded-lg">
      <h1 className="font-bold text-[20px]">Select role:</h1>
      <form onSubmit={handleSubmit}>
        <div className="h-[7vh] self-start text-left font-medium overflow-auto border-2 border-black rounded-lg p-2">
          <div className="hover:font-bold">
            <label>
              <input
                type="radio"
                value="project_manager"
                checked={selectedRole === "project_manager"}
                onChange={handleRoleChange}
                className="ml-2 mr-2 mb-3"
              />
              Project manager
            </label>
          </div>
          <div className="hover:font-bold">
            <label>
              <input
                type="radio"
                value="member"
                checked={selectedRole === "member"}
                onChange={handleRoleChange}
                className="ml-2 mr-2"
              />
              Member
            </label>
          </div>
        </div>
        <Button
          text="Change"
          onClick={(): void => {
            return;
          }}
          type="submit"
        />
      </form>
    </div>
  );
}