import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { FieldContainer, Stack, Box, Select, Divider, Button, Icon } from "@contember/ui";
import { useCallback } from "react";
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__ */ jsx(QueryLoader, { query: roleDefinitionState, children: ({ query }) => {
    const roleDefinitions = query.data.project.roles;
    const rolesToShow = rolesConfig ? roleDefinitions.filter(({ name }) => name in rolesConfig) : roleDefinitions;
    return /* @__PURE__ */ jsx(FieldContainer, { label: "Roles", useLabelElement: false, children: /* @__PURE__ */ jsxs(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__ */ jsxs(Box, { padding: false, children: [
          /* @__PURE__ */ jsxs(Stack, { align: "center", horizontal: true, gap: false, children: [
            /* @__PURE__ */ jsx(
              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__ */ jsx(Divider, { gap: false }),
            /* @__PURE__ */ jsx(
              Button,
              {
                square: true,
                distinction: "seamless",
                onClick: removeMembership,
                children: /* @__PURE__ */ jsx(Icon, { blueprintIcon: "trash" })
              }
            )
          ] }),
          variablesToShow.length > 0 && membership && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(Divider, { gap: false }),
            /* @__PURE__ */ jsx(Box, { background: false, border: false, padding: false, children: /* @__PURE__ */ jsx(Stack, { children: variablesToShow.map((variable) => /* @__PURE__ */ jsx(
              VariableSelector,
              {
                rolesConfig,
                membership,
                variable,
                onChange: (newMembership) => {
                  updateMembership(newMembership);
                }
              },
              variable.name
            )) }) })
          ] })
        ] }, membershipIndex);
      }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          distinction: "seamless",
          display: "block",
          justify: "start",
          onClick: addMembership,
          children: [
            /* @__PURE__ */ jsx(Icon, { blueprintIcon: "add", style: { marginRight: "0.2em" } }),
            "Add role"
          ]
        }
      )
    ] }) });
  } });
};
export {
  EditMembership
};
//# sourceMappingURL=EditMembership.js.map
