"use client";
import { useMutation, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Label, Select } from "flowbite-react";
import { FC } from "react";

type Roles = {
  setusePermission: Function;
  setFormState: Function;
};

const rolesList: FC<Roles> = ({ setusePermission, setFormState }) => {
  const getRoles = async () => {
    const { data } = await axios.get(`/api/roles`);
    return data?.data;
  };

  const { data: roles } = useQuery({
    queryKey: ["roles"],
    queryFn: () => getRoles(),
  });

  const { mutate: getPermissionsByRole } = useMutation({
    mutationFn: async (role_id: string) => {
      const { data } = await axios.get(`/api/role-permission/${role_id}`);
      setusePermission(data.data);
      return data.data;
    },
  });

  const getRolePermission = (e: any) => {
    const role_id = e.target.value;
    setFormState((prev: any) => {
      return {
        ...prev,
        [e.target.name]: e.target.value,
      };
    });
    getPermissionsByRole(role_id);
  };

  return (
    <>
      <div className="roles">
        <div className="max-w-md p-5">
          <div className="mb-2 block">
            <Label htmlFor="roles" value="Select a role" />
          </div>
          <Select
            id="roles"
            required
            name="role_id"
            onChange={getRolePermission}
          >
            <option value="">Select a role</option>
            {roles?.map((role: Role, index: number) => (
              <option value={role.id} key={index}>
                {role.name}
              </option>
            ))}
          </Select>
        </div>
      </div>
    </>
  );
};
export default rolesList;