"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const ui = require("@contember/ui");
const react = require("react");
const QueryLoader = require("../QueryLoader.cjs");
const VariableSelector = require("./VariableSelector.cjs");
const roles = require("../../queries/roles.cjs");
const EditMembership = ({ project, memberships, setMemberships, rolesConfig }) => {
  const { state: roleDefinitionState } = roles.useListRolesQuery(project);
  const addMembership = react.useCallback(() => {
    setMemberships((memberships2) => [...memberships2, void 0]);
  }, [setMemberships]);
  return /* @__PURE__ */ jsxRuntime.jsx(QueryLoader.QueryLoader, { query: roleDefinitionState, children: ({ query }) => {
    const roleDefinitions = query.data.project.roles;
    const rolesToShow = rolesConfig ? roleDefinitions.filter(({ name }) => name in rolesConfig) : roleDefinitions;
    return /* @__PURE__ */ jsxRuntime.jsx(ui.FieldContainer, { label: "Roles", useLabelElement: false, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: "gap", children: [
      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__ */ jsxRuntime.jsxs(ui.Box, { padding: false, children: [
          /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { align: "center", horizontal: true, gap: false, children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              ui.Select,
              {
                required: true,
                distinction: "seamless-with-padding",
                onChange: (role) => {
                  if (typeof role === "string" && (!membership || role !== membership.role)) {
                    updateMembership({ role, variables: [] });
                  }
                },
                options: [
                  { value: null, 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 ? null : membership.role
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { gap: false }),
            /* @__PURE__ */ jsxRuntime.jsx(
              ui.Button,
              {
                square: true,
                distinction: "seamless",
                onClick: removeMembership,
                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { blueprintIcon: "trash" })
              }
            )
          ] }),
          variablesToShow.length > 0 && membership && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
            /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { gap: false }),
            /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { background: false, border: false, padding: false, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { children: variablesToShow.map((variable) => /* @__PURE__ */ jsxRuntime.jsx(
              VariableSelector.VariableSelector,
              {
                rolesConfig,
                membership,
                variable,
                onChange: (newMembership) => {
                  updateMembership(newMembership);
                }
              },
              variable.name
            )) }) })
          ] })
        ] }, membershipIndex);
      }),
      /* @__PURE__ */ jsxRuntime.jsxs(
        ui.Button,
        {
          distinction: "seamless",
          display: "block",
          justify: "start",
          onClick: addMembership,
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { blueprintIcon: "add", style: { marginRight: "0.2em" } }),
            "Add role"
          ]
        }
      )
    ] }) });
  } });
};
exports.EditMembership = EditMembership;
//# sourceMappingURL=EditMembership.cjs.map
