"use client";
import { useMutation, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Label, Select } from "flowbite-react";
import { FC } from "react";
import Spinner from "../spinner";
import dynamic from "next/dynamic";
import getData from "@/utils/fetch";
const DropdownList = dynamic(() => import("../common/Dropdown"));

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, isPending } = useMutation({
    mutationFn: async (role: any) => {
      const data = await getData(`/api/v1/role-permissions/${role?.id}/${role?.guard_name}`);
      setusePermission(data.data);
      return data.data;
    },
  });

  const getRolePermission = (option: any) => {
    const role = roles?.find((role: any) => role?.id === option?.value);
    setFormState((prev: any) => {
      return {
        ...prev,
        role_id: role?.id,
        guard_name: role?.guard_name,
      };
    });
    getPermissionsByRole(role);
  };

  return (
    <>
      <div className="roles p-5">
        <div className="mb-2 block">
          <Label htmlFor="roles" value="Select a role" />
        </div>
        <div className="flex">
          <div className="w-[350px]">
            <DropdownList
              name="role"
              isMulti={false}
              idName="role_id"
              getLabel={(option: any) => option.name}
              placeholder="Select a role"
              onChange={(option) => getRolePermission(option)}
            />
            {/* <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>{isPending && <Spinner size="md" className="ml-5 mt-2" />}</div>
        </div>
      </div>
    </>
  );
};
export default rolesList;