import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { memo, useEffect, createElement } from 'react';
import classnames from 'classnames';
import useQueryParams from '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
import NoData from '@bigbinary/neetoui/NoData';
import { omit, isEmpty } from 'ramda';
import { useTranslation } from 'react-i18next';
import Header from './Header.js';
import { hyphenate, isPresent, filterBy, isNotEmpty } from '@bigbinary/neeto-cist';
import Typography from '@bigbinary/neetoui/Typography';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
import Check from '@bigbinary/neeto-icons/Check';
import Tag from '@bigbinary/neetoui/Tag';
import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
import { withRouter, Link } from 'react-router-dom';
import { n } from './inject-css-C2dztUxs.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import './Breadcrumbs.js';
import './HelpPopover.js';
import '@bigbinary/neeto-icons/Help';
import '@bigbinary/neetoui/Button';
import '@bigbinary/neetoui/Popover';
import './MoreDropdown.js';
import '@bigbinary/neeto-icons/MenuHorizontal';
import '@bigbinary/neeto-icons/MenuVertical';
import '@bigbinary/neetoui/Dropdown';
import '@bigbinary/neetoui/Tooltip';
import './Search.js';
import '@babel/runtime/helpers/slicedToArray';
import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
import '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
import '@bigbinary/neeto-icons/Search';
import '@bigbinary/neetoui/Input';
import '@bigbinary/neeto-commons-frontend/utils';

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

var css = ".neeto-molecules-settings-item [data-dark-mode-color=true]{fill:rgb(var(--neeto-ui-black))}";
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-ui-rounded-lg neeto-ui-shadow-xs neeto-ui-border-gray-300 translate flex cursor-pointer flex-col gap-y-4 border p-6 no-underline outline-none transition-transform duration-300 ease-in-out hover:-translate-y-1", className)
  }, omit(UNSUPPORTED_LINK_PROPS, otherProps));
  var LinkElement = href ? "a" : Link;
  var linkProps = href ? _objectSpread$4({
    href: href
  }, commonProps) : _objectSpread$4({
    to: path
  }, commonProps);
  return /*#__PURE__*/jsxs(LinkElement, _objectSpread$4(_objectSpread$4({}, linkProps), {}, {
    children: [/*#__PURE__*/jsxs("div", {
      className: "neeto-molecules-settings-item",
      "data-cy": "settings-item-".concat(joinHyphenCase(label)),
      "data-testid": "settings-item-".concat(joinHyphenCase(label)),
      children: [/*#__PURE__*/jsxs("div", {
        className: "mb-2 flex items-center gap-4",
        children: [Icon && /*#__PURE__*/jsx(Icon, {
          className: "neeto-ui-text-gray-600",
          size: 32
        }), /*#__PURE__*/jsx(Typography, {
          "data-cy": "settings-item-heading",
          style: "h4",
          weight: "semibold",
          children: label
        })]
      }), /*#__PURE__*/jsx(Typography, {
        "data-cy": "settings-item-description",
        style: "body2",
        children: description
      })]
    }), children && /*#__PURE__*/jsx("div", {
      className: "neeto-ui-border-gray-300 border-t pt-3",
      children: children
    })]
  }));
};
var Item$1 = /*#__PURE__*/memo(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 = 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__*/jsx(Item$1, _objectSpread$3(_objectSpread$3({}, _objectSpread$3({
    description: description,
    icon: icon,
    label: label,
    path: path
  }, otherProps)), {}, {
    dataCy: "".concat(hyphenate(label).replace(/\./g, "-"), "-integration-card"),
    children: isConnected && /*#__PURE__*/jsx(Tag, {
      className: "flex-row-reverse",
      "data-cy": "integration-status-tag",
      icon: Check,
      label: t("neetoMolecules.integrationCard.connected"),
      style: "success"
    })
  }));
});
var IntegrationItem$1 = /*#__PURE__*/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 = isPresent(label);
  return /*#__PURE__*/jsxs("div", {
    id: id,
    className: classnames("flex flex-col", {
      "mb-7": isLabelPresent
    }),
    children: [isLabelPresent && /*#__PURE__*/jsx(Typography, {
      className: "mb-6 mt-2",
      component: "h2",
      "data-cy": "settings-category-heading",
      style: "h2",
      weight: "semibold",
      children: label
    }), /*#__PURE__*/jsx("div", {
      className: "grid grid-cols-1 gap-3 py-1 md:grid-cols-2 lg:grid-cols-2 lg:gap-6 xl:grid-cols-3 2xl:grid-cols-4",
      children: items.map(function (item) {
        return /*#__PURE__*/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: filterBy(function (_ref2) {
        var label = _ref2.label,
          description = _ref2.description;
        return isTextMatching(label, searchTerm) || isTextMatching(description, searchTerm);
      }, category.items)
    });
  });
  return filterBy({
    items: 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 = 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");
  useEffect(function () {
    scrollIntoSettingCategory(categoryParam);
  }, [categoryParam]);
  return /*#__PURE__*/jsxs("div", {
    className: classnames("neeto-molecules-container", className, {
      "h-auto overflow-y-auto": isTitleHidden
    }),
    children: [isHeaderVisible && /*#__PURE__*/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)), isEmpty(filteredCategories) ? /*#__PURE__*/jsx("div", {
      className: "flex h-full w-full flex-grow items-center justify-center",
      "data-testid": "settings-no-data",
      children: /*#__PURE__*/jsx(NoData, {
        title: t("neetoMolecules.settingsPage.noData")
      })
    }) : /*#__PURE__*/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__*/createElement(Category, {
          id: id,
          isIntegration: isIntegration,
          items: items,
          label: label,
          key: id
        });
      })
    })]
  });
};

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