"use client";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC } from "react";
import { useFormContext } from "react-hook-form";
import Select from "react-select";

type Props = {
  userRoles?: string[];
};

const UserRole: FC<Props> = ({ userRoles }) => {
  const { setValue } = useFormContext();

  const getRoles = async () => {
    const { data } = await axios.get(`/api/roles`);
    return data?.data;
  };

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

  const handleRoleChange = (selectedOption: any) => {
    const option = selectedOption?.map((item: any) => Object.values(item)[0]);
    setValue("roles", option);
  };

  const defaultRole = userRoles?.map((role: any) => ({
    value: role,
    label: role,
  }));

  const rolesOption = roles?.map((role: Role) => ({
    value: role.name,
    label: role.name,
  }));

  return (
    <>
      <Select
        className="w-full"
        onChange={handleRoleChange}
        defaultValue={defaultRole}
        options={rolesOption}
        isMulti
      />
    </>
  );
};

export default UserRole;