import { useSetting } from "@/hooks/useSettings";
import { cn } from "@/lib/utils";
import { useGetRolesQuery } from "@/store/api/lookupApi";
import { __ } from "@wordpress/i18n";
import { CHIP_ROW, PICKER_LABEL } from "./classes";

/** Exclusions › User roles: a toggle button per role. */
const RoleExclusions = ({ locked }) => {
  const [picked = [], setPicked] = useSetting("exclusions.roles", []);
  const { data: roles = [] } = useGetRolesQuery();
  const toggle = (slug) =>
    setPicked(
      picked.includes(slug)
        ? picked.filter((x) => x !== slug)
        : [...picked, slug],
    );

  return (
    <div className="ino:mt-[18px]">
      <span id="pcfw-ex-roles" className={PICKER_LABEL}>
        {__("User roles", "product-comparison-for-woocommerce")}
      </span>
      <div className={CHIP_ROW} role="group" aria-labelledby="pcfw-ex-roles">
        {roles.map((role) => {
          const on = picked.includes(role.slug);

          return (
            <button
              key={role.slug}
              type="button"
              aria-pressed={on}
              disabled={locked}
              onClick={() => toggle(role.slug)}
              className={cn(
                "ino:h-[30px] ino:cursor-pointer ino:rounded-full ino:border ino:px-3 ino:text-[13px] ino:focus-visible:outline-2 ino:focus-visible:outline-ring ino:disabled:cursor-not-allowed ino:disabled:opacity-55",
                on
                  ? "ino:border-primary ino:bg-primary/10 ino:text-primary"
                  : "ino:border-input ino:bg-background ino:text-foreground",
              )}
            >
              {role.name}
            </button>
          );
        })}
      </div>
    </div>
  );
};

export default RoleExclusions;