'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var React = require('react');
var classnames = require('classnames');
var useQueryParams = require('@bigbinary/neeto-commons-frontend/react-utils/useQueryParams');
var NoData = require('@bigbinary/neetoui/NoData');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var Header = require('./Header.js');
var neetoCist = require('@bigbinary/neeto-cist');
var Typography = require('@bigbinary/neetoui/Typography');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
var Check = require('@bigbinary/neeto-icons/Check');
var Tag = require('@bigbinary/neetoui/Tag');
var general = require('@bigbinary/neeto-commons-frontend/utils/general');
var reactRouterDom = require('react-router-dom');
var injectCss = require('./inject-css-B6qYtOJe.js');
var jsxRuntime = require('react/jsx-runtime');
require('./Breadcrumbs.js');
require('./HelpPopover.js');
require('@bigbinary/neeto-icons/Help');
require('@bigbinary/neetoui/Button');
require('@bigbinary/neetoui/Popover');
require('./MoreDropdown.js');
require('@bigbinary/neeto-icons/MenuHorizontal');
require('@bigbinary/neeto-icons/MenuVertical');
require('@bigbinary/neetoui/Dropdown');
require('@bigbinary/neetoui/Tooltip');
require('./Search.js');
require('@babel/runtime/helpers/slicedToArray');
require('@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce');
require('@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect');
require('@bigbinary/neeto-icons/Search');
require('@bigbinary/neetoui/Input');
require('@bigbinary/neeto-commons-frontend/utils');

var UNSUPPORTED_LINK_PROPS = ["staticContext", "tReady"];

var css = ".neeto-molecules-settings-link:active,.neeto-molecules-settings-link:hover{box-shadow:0 0 9.2px 0 rgba(29,33,59,.122)}.neeto-molecules-settings-link:active .neeto-molecules-settings-item-heading,.neeto-molecules-settings-link:hover .neeto-molecules-settings-item-heading{color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-settings-link:focus,.neeto-molecules-settings-link:focus-visible{border-color:rgb(var(--neeto-ui-primary-500));box-shadow:0 0 9.2px 0 rgba(29,33,59,.122)}.neeto-molecules-settings-link:focus .neeto-molecules-settings-item-heading,.neeto-molecules-settings-link:focus-visible .neeto-molecules-settings-item-heading{color:rgb(var(--neeto-ui-primary-500))}.neeto-molecules-settings-item [data-dark-mode-color=true]{fill:rgb(var(--neeto-ui-black))}.neeto-molecules-settings-item svg path{stroke-width:1.2px}";
injectCss.n(css,{});

var _excluded$1 = ["label", "description", "icon", "path", "href", "dataCy", "className", "children"];
function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Item = function Item(_ref) {
  var label = _ref.label,
    description = _ref.description,
    _ref$icon = _ref.icon,
    Icon = _ref$icon === void 0 ? null : _ref$icon,
    path = _ref.path,
    href = _ref.href,
    dataCy = _ref.dataCy,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    children = _ref.children,
    otherProps = _objectWithoutProperties(_ref, _excluded$1);
  var commonProps = _objectSpread$4({
    "data-cy": dataCy,
    className: classnames("neeto-molecules-settings-link neeto-ui-rounded-lg neeto-ui-border-gray-200 flex cursor-pointer flex-col gap-y-4 border p-6 no-underline outline-none transition-shadow duration-300 ease-in-out group", className)
  }, ramda.omit(UNSUPPORTED_LINK_PROPS, otherProps));
  var LinkElement = href ? "a" : reactRouterDom.Link;
  var linkProps = href ? _objectSpread$4({
    href: href
  }, commonProps) : _objectSpread$4({
    to: path
  }, commonProps);
  return /*#__PURE__*/jsxRuntime.jsxs(LinkElement, _objectSpread$4(_objectSpread$4({}, linkProps), {}, {
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "neeto-molecules-settings-item",
      "data-cy": "settings-item-".concat(general.joinHyphenCase(label)),
      "data-testid": "settings-item-".concat(general.joinHyphenCase(label)),
      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "mb-2.5 flex items-center gap-3",
        children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
          className: "neeto-ui-text-gray-500",
          size: 24
        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "neeto-molecules-settings-item-heading neeto-ui-text-black transition-color text-lg leading-6 duration-300 ease-in-out",
          "data-cy": "settings-item-heading",
          style: "h3",
          weight: "semibold",
          children: label
        })]
      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
        className: "neeto-ui-text-gray-600",
        "data-cy": "settings-item-description",
        style: "body2",
        children: description
      })]
    }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-ui-border-gray-300 border-t pt-3",
      children: children
    })]
  }));
};
var Item$1 = /*#__PURE__*/React.memo(reactRouterDom.withRouter(Item));

var _excluded = ["t", "isConnected", "icon", "description", "label", "path"];
function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var IntegrationItem = reactUtils.withT(function (_ref) {
  var t = _ref.t,
    isConnected = _ref.isConnected,
    icon = _ref.icon,
    description = _ref.description,
    label = _ref.label,
    path = _ref.path,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/jsxRuntime.jsx(Item$1, _objectSpread$3(_objectSpread$3({}, _objectSpread$3({
    description: description,
    icon: icon,
    label: label,
    path: path
  }, otherProps)), {}, {
    dataCy: "".concat(neetoCist.hyphenate(label).replace(/\./g, "-"), "-integration-card"),
    children: isConnected && /*#__PURE__*/jsxRuntime.jsx(Tag, {
      className: "flex-row-reverse",
      "data-cy": "integration-status-tag",
      icon: Check,
      label: t("neetoMolecules.integrationCard.connected"),
      style: "success"
    })
  }));
});
var IntegrationItem$1 = /*#__PURE__*/React.memo(IntegrationItem);

function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Category = function Category(_ref) {
  var items = _ref.items,
    label = _ref.label,
    id = _ref.id,
    isIntegration = _ref.isIntegration;
  var SettingsCard = isIntegration ? IntegrationItem$1 : Item$1;
  var isLabelPresent = neetoCist.isPresent(label);
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    id: id,
    className: classnames("flex flex-col", {
      "mb-7": isLabelPresent
    }),
    children: [isLabelPresent && /*#__PURE__*/jsxRuntime.jsx(Typography, {
      className: "mb-6 mt-2",
      component: "h2",
      "data-cy": "settings-category-heading",
      style: "h2",
      weight: "semibold",
      children: label
    }), /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "grid grid-cols-1 gap-3 py-1 md:grid-cols-2 lg:grid-cols-2 lg:gap-4 xl:grid-cols-3 2xl:grid-cols-4",
      children: items.map(function (item) {
        return /*#__PURE__*/jsxRuntime.jsx(SettingsCard, _objectSpread$2({}, item), item.label);
      })
    })]
  });
};

function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var isTextMatching = function isTextMatching(label, searchTerm) {
  return label.toLowerCase().includes(searchTerm.trim().toLowerCase());
};
var scrollIntoSettingCategory = function scrollIntoSettingCategory(activeCategory) {
  var _document$getElementB;
  (_document$getElementB = document.getElementById(activeCategory)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({
    behavior: "smooth"
  });
};
var filterCategories = function filterCategories(_ref) {
  var _ref$categories = _ref.categories,
    categories = _ref$categories === void 0 ? [] : _ref$categories,
    _ref$searchTerm = _ref.searchTerm,
    searchTerm = _ref$searchTerm === void 0 ? "" : _ref$searchTerm;
  var isSearchTermBlank = !searchTerm.trim();
  var filteredCategories = isSearchTermBlank ? categories : categories.map(function (category) {
    return _objectSpread$1(_objectSpread$1({}, category), {}, {
      items: neetoCist.filterBy(function (_ref2) {
        var label = _ref2.label,
          description = _ref2.description;
        return isTextMatching(label, searchTerm) || isTextMatching(description, searchTerm);
      }, category.items)
    });
  });
  return neetoCist.filterBy({
    items: neetoCist.isNotEmpty
  }, filteredCategories);
};

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 Settings = function Settings(_ref) {
  var _ref$isTitleHidden = _ref.isTitleHidden,
    isTitleHidden = _ref$isTitleHidden === void 0 ? false : _ref$isTitleHidden,
    _ref$isSearchHidden = _ref.isSearchHidden,
    isSearchHidden = _ref$isSearchHidden === void 0 ? false : _ref$isSearchHidden,
    title = _ref.title,
    _ref$headerProps = _ref.headerProps,
    headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
    _ref$categories = _ref.categories,
    categories = _ref$categories === void 0 ? [] : _ref$categories,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var _useQueryParams = useQueryParams(),
    categoryParam = _useQueryParams.category,
    _useQueryParams$searc = _useQueryParams.searchTerm,
    searchTerm = _useQueryParams$searc === void 0 ? "" : _useQueryParams$searc;
  var filteredCategories = filterCategories({
    categories: categories,
    searchTerm: searchTerm
  });
  var isHeaderVisible = !isSearchHidden || !isTitleHidden;
  var headerTitle = title !== null && title !== void 0 ? title : t("neetoMolecules.settingsPage.title");
  React.useEffect(function () {
    scrollIntoSettingCategory(categoryParam);
  }, [categoryParam]);
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: classnames("neeto-molecules-container", className, {
      "h-auto overflow-y-auto": isTitleHidden
    }),
    children: [isHeaderVisible && /*#__PURE__*/jsxRuntime.jsx(Header, _objectSpread({
      className: classnames({
        "min-h-0 pb-4 pt-8": isTitleHidden
      }),
      title: !isTitleHidden && headerTitle,
      searchProps: isSearchHidden ? null : {
        className: "w-72",
        placeholder: t("neetoMolecules.settingsPage.placeholder.search")
      }
    }, headerProps)), ramda.isEmpty(filteredCategories) ? /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "flex h-full w-full flex-grow items-center justify-center",
      "data-testid": "settings-no-data",
      children: /*#__PURE__*/jsxRuntime.jsx(NoData, {
        title: t("neetoMolecules.settingsPage.noData")
      })
    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "w-full",
      children: filteredCategories.map(function (_ref2) {
        var id = _ref2.id,
          label = _ref2.label,
          items = _ref2.items,
          isIntegration = _ref2.isIntegration;
        return /*#__PURE__*/React.createElement(Category, {
          id: id,
          isIntegration: isIntegration,
          items: items,
          label: label,
          key: id
        });
      })
    })]
  });
};

module.exports = Settings;
//# sourceMappingURL=Settings.js.map
