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 { omit, isEmpty } from 'ramda';
import { useTranslation } from 'react-i18next';
import { Typography, Badge } from '@bigbinary/neeto-atoms';
import { hyphenate, isPresent, filterBy, isNotEmpty } from '@bigbinary/neeto-cist';
import { useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { joinHyphenCase } from '@bigbinary/neeto-commons-frontend/utils/general';
import { Link } from 'react-router-dom';
import { jsxs, jsx } from 'react/jsx-runtime';
import Header from './Header.js';
import './Breadcrumbs.js';
import '@bigbinary/neeto-atoms/primitives';
import './HelpPopover.js';
import '../circle-question-mark-Dib48f5Z.js';
import '../createLucideIcon-mNMhCCpf.js';
import './MoreDropdown.js';
import '../ellipsis-DpI9xqUK.js';
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-commons-frontend/utils';
import '../search-DCgpNjip.js';

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

var _excluded$1 = ["icon", "description", "label", "path", "href", "isConnected", "isMobileOrTablet", "className"];
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 IntegrationItem = function IntegrationItem(_ref) {
  var _ref$icon = _ref.icon,
    Icon = _ref$icon === void 0 ? null : _ref$icon,
    description = _ref.description,
    label = _ref.label,
    path = _ref.path,
    href = _ref.href,
    isConnected = _ref.isConnected,
    _ref$isMobileOrTablet = _ref.isMobileOrTablet,
    isMobileOrTablet = _ref$isMobileOrTablet === void 0 ? false : _ref$isMobileOrTablet,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    otherProps = _objectWithoutProperties(_ref, _excluded$1);
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var commonProps = _objectSpread$4({
    "data-testid": "".concat(hyphenate(label).replace(/\./g, "-"), "-integration-card"),
    className: classnames("relative flex cursor-pointer flex-col items-start gap-3 rounded-lg border border-border px-6 py-6 no-underline outline-none transition-shadow duration-300 ease-in-out md:py-8 lg:flex-row xl:gap-4", "hover:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] hover:[&_[data-settings-heading]]:text-primary", "active:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] active:[&_[data-settings-heading]]:text-primary", "focus:border-primary focus:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] focus:[&_[data-settings-heading]]:text-primary", "focus-visible:border-primary focus-visible:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] focus-visible:[&_[data-settings-heading]]:text-primary", 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: [Icon && /*#__PURE__*/jsx("div", {
      className: "border-border mt-0.5 flex shrink-0 items-center justify-center rounded-lg border p-1.5 shadow-sm xl:p-2.5",
      children: /*#__PURE__*/jsx(Icon, {
        "data-testid": "".concat(joinHyphenCase(label), "-integration-icon"),
        size: isMobileOrTablet ? 26 : 32
      })
    }), /*#__PURE__*/jsxs("div", {
      className: "flex min-w-0 flex-1 flex-col gap-1",
      children: [/*#__PURE__*/jsx(Typography, {
        asChild: true,
        variant: "h5",
        weight: "semibold",
        children: /*#__PURE__*/jsx("span", {
          "data-settings-heading": "",
          "data-testid": "settings-item-heading",
          children: label
        })
      }), /*#__PURE__*/jsx(Typography, {
        asChild: true,
        variant: "body2",
        children: /*#__PURE__*/jsx("p", {
          className: "text-muted-foreground",
          "data-testid": "settings-item-description",
          children: description
        })
      })]
    }), isConnected && /*#__PURE__*/jsx(Badge, {
      className: "absolute top-2 right-2",
      "data-testid": "integration-status-tag",
      variant: "default",
      children: t("neetoMolecules.integrationCard.connected")
    })]
  }));
};
var IntegrationItem$1 = /*#__PURE__*/memo(IntegrationItem);

var _excluded = ["label", "description", "icon", "path", "href", "dataTestid", "className", "children"];
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 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,
    dataTestid = _ref.dataTestid,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    children = _ref.children,
    otherProps = _objectWithoutProperties(_ref, _excluded);
  var commonProps = _objectSpread$3({
    "data-testid": dataTestid,
    className: classnames("group flex cursor-pointer flex-col gap-y-4 rounded-lg border border-border p-6 no-underline outline-none transition-shadow duration-300 ease-in-out", "hover:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] hover:[&_[data-settings-heading]]:text-primary", "active:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] active:[&_[data-settings-heading]]:text-primary", "focus:border-primary focus:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] focus:[&_[data-settings-heading]]:text-primary", "focus-visible:border-primary focus-visible:shadow-[0px_0px_9.2px_0px_rgba(29,33,59,0.12)] focus-visible:[&_[data-settings-heading]]:text-primary", className)
  }, omit(UNSUPPORTED_LINK_PROPS, otherProps));
  var LinkElement = href ? "a" : Link;
  var linkProps = href ? _objectSpread$3({
    href: href
  }, commonProps) : _objectSpread$3({
    to: path
  }, commonProps);
  return /*#__PURE__*/jsxs(LinkElement, _objectSpread$3(_objectSpread$3({}, linkProps), {}, {
    children: [/*#__PURE__*/jsxs("div", {
      "data-testid": "settings-item-".concat(joinHyphenCase(label)),
      children: [/*#__PURE__*/jsxs("div", {
        className: "mb-2.5 flex items-center gap-3",
        children: [Icon && /*#__PURE__*/jsx(Icon, {
          className: "text-muted-foreground",
          size: 24
        }), /*#__PURE__*/jsx(Typography, {
          asChild: true,
          variant: "h5",
          weight: "semibold",
          children: /*#__PURE__*/jsx("span", {
            "data-settings-heading": "",
            "data-testid": "settings-item-heading",
            children: label
          })
        })]
      }), /*#__PURE__*/jsx(Typography, {
        asChild: true,
        variant: "body2",
        children: /*#__PURE__*/jsx("p", {
          className: "text-muted-foreground",
          "data-testid": "settings-item-description",
          children: description
        })
      })]
    }), children && /*#__PURE__*/jsx("div", {
      className: "border-border border-t pt-3",
      children: children
    })]
  }));
};
var Item$1 = /*#__PURE__*/memo(Item);

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 _useBreakpoints = useBreakpoints(),
    isSize = _useBreakpoints.isSize;
  var SettingsCard = isIntegration ? IntegrationItem$1 : Item$1;
  var isMobileOrTablet = isSize("mobile") || isSize("tablet");
  var isLabelPresent = isPresent(label);
  return /*#__PURE__*/jsxs("div", {
    id: id,
    className: classnames("flex flex-col", {
      "mb-7": isLabelPresent
    }),
    children: [isLabelPresent && /*#__PURE__*/jsx(Typography, {
      asChild: true,
      variant: "h4",
      weight: "semibold",
      children: /*#__PURE__*/jsx("h2", {
        className: "mt-2 mb-6",
        "data-testid": "settings-category-heading",
        children: label
      })
    }), /*#__PURE__*/jsx("div", {
      className: classnames("grid grid-cols-1 gap-3 py-1 md:grid-cols-2 lg:grid-cols-2 lg:gap-4", {
        "xl:grid-cols-2 2xl:grid-cols-3": isIntegration,
        "xl:grid-cols-3 2xl:grid-cols-4": !isIntegration
      }),
      children: items.map(function (item) {
        return /*#__PURE__*/jsx(SettingsCard, _objectSpread$2(_objectSpread$2({}, item), isIntegration && {
          isMobileOrTablet: isMobileOrTablet
        }), 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("flex h-dvh grow flex-col items-start justify-start overflow-y-auto px-5 md:px-10", {
      "h-auto overflow-y-auto": isTitleHidden
    }, className),
    children: [isHeaderVisible && /*#__PURE__*/jsx(Header, _objectSpread({
      className: classnames({
        "min-h-0 pt-8 pb-4": 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("div", {
        className: "text-muted-foreground flex flex-col items-center gap-2",
        children: /*#__PURE__*/jsx("p", {
          className: "text-lg font-medium",
          children: 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
