import { useCallback, createElement, Fragment, useState } from "react";
import { FieldContainer, Box, TextInput, Button, Icon } from "@contember/ui";
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__ */ createElement(FieldContainer, {
    label,
    direction: "vertical",
    gap: "small",
    style: { margin: "1em" }
  }, localValues.map((v, i) => /* @__PURE__ */ createElement(Box, {
    key: i,
    padding: "no-padding",
    direction: "horizontal",
    gap: "none"
  }, /* @__PURE__ */ createElement(TextInput, {
    notNull: true,
    value: v,
    distinction: "seamless",
    onChange: (newValue) => {
      onChangeCallback(i, newValue ?? "");
    },
    style: { marginLeft: "0.5em" }
  }), /* @__PURE__ */ createElement(Button, {
    distinction: "seamless",
    onClick: () => {
      onChangeCallback(i, null);
    }
  }, /* @__PURE__ */ createElement(Icon, {
    blueprintIcon: "trash"
  })))), /* @__PURE__ */ createElement(Button, {
    distinction: "seamless",
    justification: "justifyStart",
    onClick: () => {
      setLocalValues((prev) => [...prev, ""]);
    }
  }, /* @__PURE__ */ createElement(Icon, {
    blueprintIcon: "add",
    style: {
      marginRight: "0.2em",
      position: "relative",
      top: "0.05em"
    }
  }), "Add"));
};
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__ */ createElement(Fragment, null, "Unknown variable");
  }
  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__ */ createElement(Component, {
      value: values,
      onChange: innerOnChange
    });
  } else {
    return /* @__PURE__ */ createElement(GenericVariableEdit, {
      label: variable.name,
      value: values,
      onChange: innerOnChange
    });
  }
};
export { VariableSelector };
//# sourceMappingURL=VariableSelector.js.map
