import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { Fragment } from 'react';
import { findBy, noop } from '@bigbinary/neeto-cist';
import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
import Braces from '@bigbinary/neeto-icons/Braces';
import Dropdown from '@bigbinary/neetoui/Dropdown';
import Typography from '@bigbinary/neetoui/Typography';
import { mergeLeft, uniqBy, prop, isEmpty } from 'ramda';
import { n } from './inject-css-C2dztUxs.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var css = ".neeto-molecules-dynamic-variables{display:flex;flex-direction:column;gap:.375rem;max-width:22.5rem;min-width:11.5rem;padding:.5rem}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.neeto-molecules-dynamic-variables__list button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:.375rem;text-align:start;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){.neeto-molecules-dynamic-variables__list button{transition:none}}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
n(css,{});

var parseVariables = function parseVariables() {
  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var uncategorized = [];
  var groupedVariables = [];
  var categorySet = new Set();
  variableArr.forEach(function (variable) {
    var category = variable.category,
      label = variable.label,
      variables = variable.variables;
    if (category && variables) {
      var parsedVariables = variables.map(mergeLeft({
        category: category,
        categoryLabel: label
      }));
      if (!categorySet.has(category)) {
        categorySet.add(category);
        groupedVariables.push({
          label: label,
          variables: parsedVariables
        });
      } else {
        var existingGroup = findBy({
          label: label
        }, groupedVariables);
        existingGroup.variables = uniqBy(prop("key"), existingGroup.variables.concat(parsedVariables));
      }
    } else {
      uncategorized.push(variable);
    }
  });
  if (!isEmpty(uncategorized)) {
    groupedVariables.push({
      label: !isEmpty(groupedVariables) ? "Others" : null,
      variables: uncategorized
    });
  }
  return groupedVariables;
};

var _excluded = ["onVariableClick", "variables", "buttonProps"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Menu = Dropdown.Menu;
var DynamicVariables = function DynamicVariables(_ref) {
  var _ref$onVariableClick = _ref.onVariableClick,
    onVariableClick = _ref$onVariableClick === void 0 ? noop : _ref$onVariableClick,
    _ref$variables = _ref.variables,
    variables = _ref$variables === void 0 ? [] : _ref$variables,
    buttonProps = _ref.buttonProps,
    dropdownProps = _objectWithoutProperties(_ref, _excluded);
  if (isEmpty(variables)) {
    return null;
  }
  var parsedVariables = parseVariables(variables);
  return /*#__PURE__*/jsx(Dropdown, _objectSpread(_objectSpread({
    appendTo: function appendTo() {
      return document.body;
    },
    buttonStyle: "secondary",
    icon: Braces,
    strategy: "fixed",
    zIndex: 99999,
    buttonProps: _objectSpread({
      "data-testid": "dynamic-variables-button"
    }, buttonProps)
  }, dropdownProps), {}, {
    children: /*#__PURE__*/jsx(Menu, {
      children: /*#__PURE__*/jsx("div", {
        className: "neeto-molecules-dynamic-variables",
        "data-testid": "dynamic-variables-list",
        children: parsedVariables.map(function (_ref2) {
          var label = _ref2.label,
            variables = _ref2.variables;
          return /*#__PURE__*/jsxs(Fragment, {
            children: [label && /*#__PURE__*/jsxs("div", {
              className: "flex flex-row items-center gap-x-2",
              children: [/*#__PURE__*/jsx(Typography, {
                style: "h6",
                children: label
              }), /*#__PURE__*/jsx("hr", {
                className: "neeto-ui-border-gray-200 flex flex-grow"
              })]
            }), /*#__PURE__*/jsx("div", {
              className: "neeto-molecules-dynamic-variables__list",
              "data-testid": joinHyphenCase("dynamic-variables-list", label),
              children: variables.map(function (item) {
                return /*#__PURE__*/jsx("button", {
                  "data-testid": joinHyphenCase("dynamic-variables-list-item", item.label),
                  onClick: function onClick() {
                    return onVariableClick(item);
                  },
                  children: item.label
                }, item.label);
              })
            })]
          }, label);
        })
      })
    })
  }));
};

export { DynamicVariables as default };
//# sourceMappingURL=DynamicVariables.js.map
