import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
import { FieldContainer, Box, TextInput, Button, Icon } from "@contember/ui";
import { useCallback, useState } from "react";
const GenericVariableEdit = ({ label, value, onChange }) => {
  const [localValues, setLocalValues] = useState(value.length > 0 ? value : [""]);
  const onChangeCallback = useCallback((index, newValue) => {
    const newValues = newValue !== null ? localValues.map((v, i) => i === index ? newValue : v) : localValues.filter((_, i) => i !== index);
    setLocalValues(newValues);
    onChange(newValues.map((it) => it.trim()).filter((it) => !!it));
  }, [localValues, onChange, setLocalValues]);
  return /* @__PURE__ */ jsxDEV(FieldContainer, { label, gap: "gap", style: { margin: "1em" }, children: [
    localValues.map((v, i) => /* @__PURE__ */ jsxDEV(Box, { padding: false, horizontal: true, gap: false, children: [
      /* @__PURE__ */ jsxDEV(
        TextInput,
        {
          notNull: true,
          value: v,
          distinction: "seamless",
          onChange: (newValue) => {
            onChangeCallback(i, newValue ?? "");
          },
          style: { marginLeft: "0.5em" }
        },
        void 0,
        false,
        {
          fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
          lineNumber: 30,
          columnNumber: 6
        },
        void 0
      ),
      /* @__PURE__ */ jsxDEV(
        Button,
        {
          distinction: "seamless",
          onClick: () => {
            onChangeCallback(i, null);
          },
          children: /* @__PURE__ */ jsxDEV(Icon, { blueprintIcon: "trash" }, void 0, false, {
            fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
            lineNumber: 45,
            columnNumber: 7
          }, void 0)
        },
        void 0,
        false,
        {
          fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
          lineNumber: 39,
          columnNumber: 6
        },
        void 0
      )
    ] }, i, true, {
      fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
      lineNumber: 29,
      columnNumber: 5
    }, void 0)),
    /* @__PURE__ */ jsxDEV(
      Button,
      {
        distinction: "seamless",
        justify: "start",
        onClick: () => {
          setLocalValues((prev) => [...prev, ""]);
        },
        children: [
          /* @__PURE__ */ jsxDEV(
            Icon,
            {
              blueprintIcon: "add",
              style: {
                marginRight: "0.2em",
                position: "relative",
                top: "0.05em"
              }
            },
            void 0,
            false,
            {
              fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
              lineNumber: 56,
              columnNumber: 5
            },
            void 0
          ),
          "Add"
        ]
      },
      void 0,
      true,
      {
        fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
        lineNumber: 49,
        columnNumber: 4
      },
      void 0
    )
  ] }, void 0, true, {
    fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
    lineNumber: 27,
    columnNumber: 3
  }, void 0);
};
const VariableSelector = ({ rolesConfig, membership, variable, onChange }) => {
  const innerOnChange = useCallback(
    (newValues) => {
      const newMembership = {
        ...membership,
        variables: [
          ...membership.variables.filter((membershipVariable) => membershipVariable.name !== variable.name),
          {
            name: variable.name,
            values: newValues
          }
        ]
      };
      onChange(newMembership);
    },
    [membership, onChange, variable.name]
  );
  const roleConfig = rolesConfig?.[membership.role];
  const variableConfig = roleConfig?.variables[variable.name];
  if (roleConfig && variableConfig === void 0) {
    return /* @__PURE__ */ jsxDEV(Fragment, { children: "Unknown variable" }, void 0, false, {
      fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
      lineNumber: 94,
      columnNumber: 10
    }, void 0);
  }
  const variableInMembership = membership.variables.find(
    (membershipVariable) => membershipVariable.name === variable.name
  );
  const values = variableInMembership !== void 0 ? variableInMembership.values : [];
  if (variableConfig?.render) {
    const Component = variableConfig.render;
    return /* @__PURE__ */ jsxDEV(Component, { value: values, onChange: innerOnChange }, void 0, false, {
      fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
      lineNumber: 104,
      columnNumber: 10
    }, void 0);
  } else {
    return /* @__PURE__ */ jsxDEV(GenericVariableEdit, { label: variable.name, value: values, onChange: innerOnChange }, void 0, false, {
      fileName: "/__w/interface/interface/packages/admin/src/tenant/components/member/VariableSelector.tsx",
      lineNumber: 106,
      columnNumber: 10
    }, void 0);
  }
};
export {
  VariableSelector
};
//# sourceMappingURL=VariableSelector.js.map
