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 { jsxDEV, Fragment } from "react/jsx-dev-runtime";
import { useListRolesQuery } from "../../queries/roles.js";
var _jsxFileName = "/__w/interface/interface/packages/admin/src/tenant/components/member/EditMembership.tsx";
const EditMembership = ({
  project,
  memberships,
  setMemberships,
  rolesConfig
}) => {
  const {
    state: roleDefinitionState
  } = useListRolesQuery(project);
  const addMembership = useCallback(() => {
    setMemberships((memberships2) => [...memberships2, void 0]);
  }, [setMemberships]);
  return /* @__PURE__ */ jsxDEV(QueryLoader, {
    query: roleDefinitionState,
    children: ({
      query
    }) => {
      const roleDefinitions = query.data.project.roles;
      const rolesToShow = rolesConfig ? roleDefinitions.filter(({
        name
      }) => name in rolesConfig) : roleDefinitions;
      return /* @__PURE__ */ jsxDEV(FieldContainer, {
        label: "Roles",
        useLabelElement: false,
        children: /* @__PURE__ */ jsxDEV(Stack, {
          direction: "vertical",
          gap: "small",
          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__ */ jsxDEV(Box, {
              padding: "no-padding",
              children: [/* @__PURE__ */ jsxDEV(Stack, {
                align: "center",
                direction: "horizontal",
                gap: "none",
                children: [/* @__PURE__ */ jsxDEV(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
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 69,
                  columnNumber: 12
                }, void 0), /* @__PURE__ */ jsxDEV(Divider, {
                  gap: "none"
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 92,
                  columnNumber: 12
                }, void 0), /* @__PURE__ */ jsxDEV(Button, {
                  distinction: "seamless",
                  flow: "squarish",
                  onClick: removeMembership,
                  children: /* @__PURE__ */ jsxDEV(Icon, {
                    blueprintIcon: "trash"
                  }, void 0, false, {
                    fileName: _jsxFileName,
                    lineNumber: 98,
                    columnNumber: 13
                  }, void 0)
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 93,
                  columnNumber: 12
                }, void 0)]
              }, void 0, true, {
                fileName: _jsxFileName,
                lineNumber: 68,
                columnNumber: 11
              }, void 0), variablesToShow.length > 0 && membership && /* @__PURE__ */ jsxDEV(Fragment, {
                children: [/* @__PURE__ */ jsxDEV(Divider, {
                  gap: "none"
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 103,
                  columnNumber: 12
                }, void 0), /* @__PURE__ */ jsxDEV(Box, {
                  distinction: "seamless",
                  children: /* @__PURE__ */ jsxDEV(Stack, {
                    direction: "vertical",
                    children: variablesToShow.map((variable) => /* @__PURE__ */ jsxDEV(VariableSelector, {
                      rolesConfig,
                      membership,
                      variable,
                      onChange: (newMembership) => {
                        updateMembership(newMembership);
                      }
                    }, variable.name, false, {
                      fileName: _jsxFileName,
                      lineNumber: 107,
                      columnNumber: 16
                    }, void 0))
                  }, void 0, false, {
                    fileName: _jsxFileName,
                    lineNumber: 105,
                    columnNumber: 13
                  }, void 0)
                }, void 0, false, {
                  fileName: _jsxFileName,
                  lineNumber: 104,
                  columnNumber: 12
                }, void 0)]
              }, void 0, true)]
            }, membershipIndex, true, {
              fileName: _jsxFileName,
              lineNumber: 67,
              columnNumber: 10
            }, void 0);
          }), /* @__PURE__ */ jsxDEV(Button, {
            distinction: "seamless",
            flow: "block",
            justification: "justifyStart",
            onClick: addMembership,
            children: [/* @__PURE__ */ jsxDEV(Icon, {
              blueprintIcon: "add",
              style: {
                marginRight: "0.2em"
              }
            }, void 0, false, {
              fileName: _jsxFileName,
              lineNumber: 131,
              columnNumber: 9
            }, void 0), "Add role"]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 125,
            columnNumber: 8
          }, void 0)]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 47,
          columnNumber: 7
        }, void 0)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 6
      }, void 0);
    }
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 40,
    columnNumber: 3
  }, void 0);
};
export {
  EditMembership
};
//# sourceMappingURL=EditMembership.js.map
