import { useCallback, createElement, Fragment } from "react";
import { FieldContainer, Stack, Box, Select, Divider, Button, Icon } from "@contember/ui";
import { QueryLoader } from "../QueryLoader.js";
import { VariableSelector } from "./VariableSelector.js";
import { useListRolesQuery } from "../../queries/roles.js";
const EditMembership = ({ project, memberships, setMemberships, rolesConfig }) => {
  const { state: roleDefinitionState } = useListRolesQuery(project);
  const addMembership = useCallback(() => {
    setMemberships((memberships2) => [...memberships2, void 0]);
  }, [setMemberships]);
  return /* @__PURE__ */ createElement(QueryLoader, {
    query: roleDefinitionState
  }, ({ query }) => {
    const roleDefinitions = query.data.project.roles;
    const rolesToShow = rolesConfig ? roleDefinitions.filter(({ name }) => name in rolesConfig) : roleDefinitions;
    return /* @__PURE__ */ createElement(FieldContainer, {
      label: "Roles",
      useLabelElement: false
    }, /* @__PURE__ */ createElement(Stack, {
      direction: "vertical",
      gap: "small"
    }, memberships.map((membership, membershipIndex) => {
      const roleDefinition = membership && roleDefinitions.find((def) => def.name === membership.role);
      const variablesToShow = (roleDefinition && roleDefinition.variables.filter((it) => "entityName" in it)) ?? [];
      const updateMembership = (newMembership) => {
        setMemberships((memberships2) => {
          const newMemberships = [...memberships2];
          newMemberships[membershipIndex] = newMembership;
          return newMemberships;
        });
      };
      const removeMembership = () => {
        setMemberships((memberships2) => {
          return memberships2.slice(0, membershipIndex).concat(memberships2.slice(membershipIndex + 1));
        });
      };
      return /* @__PURE__ */ createElement(Box, {
        key: membershipIndex,
        padding: "no-padding"
      }, /* @__PURE__ */ createElement(Stack, {
        align: "center",
        direction: "horizontal",
        gap: "none"
      }, /* @__PURE__ */ createElement(Select, {
        required: true,
        distinction: "seamless-with-padding",
        onChange: (role) => {
          if (typeof role === "string" && (!membership || role !== membership.role)) {
            updateMembership({ role, variables: [] });
          }
        },
        options: [
          { value: -1, label: "Select role", disabled: true },
          ...rolesToShow.map(({ name: roleName }) => {
            const otherIndex = memberships.findIndex((mem) => mem && mem.role === roleName);
            const enabled = otherIndex === -1 || otherIndex === membershipIndex;
            return {
              value: roleName,
              label: rolesConfig?.[roleName]?.name ?? roleName,
              disabled: !enabled
            };
          })
        ],
        placeholder: "Select role",
        value: membership === void 0 ? -1 : membership.role
      }), /* @__PURE__ */ createElement(Divider, {
        gap: "none"
      }), /* @__PURE__ */ createElement(Button, {
        distinction: "seamless",
        flow: "squarish",
        onClick: removeMembership
      }, /* @__PURE__ */ createElement(Icon, {
        blueprintIcon: "trash"
      }))), variablesToShow.length > 0 && membership && /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(Divider, {
        gap: "none"
      }), /* @__PURE__ */ createElement(Box, {
        distinction: "seamless"
      }, /* @__PURE__ */ createElement(Stack, {
        direction: "vertical"
      }, variablesToShow.map((variable) => /* @__PURE__ */ createElement(VariableSelector, {
        key: variable.name,
        rolesConfig,
        membership,
        variable,
        onChange: (newMembership) => {
          updateMembership(newMembership);
        }
      }))))));
    }), /* @__PURE__ */ createElement(Button, {
      distinction: "seamless",
      flow: "block",
      justification: "justifyStart",
      onClick: addMembership
    }, /* @__PURE__ */ createElement(Icon, {
      blueprintIcon: "add",
      style: { marginRight: "0.2em" }
    }), "Add role")));
  });
};
export { EditMembership };
//# sourceMappingURL=EditMembership.js.map
