"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.MultiLevelSortingPanel = void 0;
exports._MultiLevelSortingPanel = _MultiLevelSortingPanel;
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _react2 = require("@wix/bex-core/react");
var _designSystem = require("@wix/design-system");
var _useRafRender = require("../../hooks/useRafRender");
var _MultiLevelSortingList = require("./MultiLevelSortingList");
var _ScrollableContent = require("../ScrollableContent");
var _PatternsSidePanel = require("../SidePanel/PatternsSidePanel");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/MultiLevelSortingPanel/MultiLevelSortingPanel.tsx";
function _MultiLevelSortingPanel(props) {
  const {
    state: table
  } = props;
  const {
    multiLevelSorting
  } = table;
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const entered = (0, _useRafRender.useRafRender)();
  if (!entered || !multiLevelSorting) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_PatternsSidePanel.PatternsSidePanel, {
    dataHook: "multi-level-sorting-panel",
    width: "100%",
    onClose: () => {
      multiLevelSorting.reportSidePanelClose();
      table.sidePanel.close();
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SidePanel.Header, {
    title: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      gap: "SP1",
      verticalAlign: "middle",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Heading, {
      size: "small",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 13
      }
    }, t('cairo.table.advanced-sorting.button.tooltip')), /*#__PURE__*/_react.default.createElement(_designSystem.InfoIcon, {
      size: "medium",
      content: t('cairo.table.advanced-sorting.title.tooltip'),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 13
      }
    })),
    subtitle: t('cairo.table.advanced-sorting.subtitle'),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 7
    }
  }), /*#__PURE__*/_react.default.createElement(_ScrollableContent.ScrollableContent, {
    dataHook: "multi-level-sorting-panel-scroll-container",
    overflowY: true,
    smooth: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 60,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_MultiLevelSortingList.MultiLevelSortingList, {
    state: multiLevelSorting,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 65,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
    dataHook: "multi-level-sorting-add-sort-tooltip",
    disabled: multiLevelSorting.hasAvailableSortingColumns,
    maxWidth: 400,
    content: t('cairo.table.advanced-sorting.disabled.cta.tooltip'),
    appendTo: "window",
    moveBy: {
      y: -24
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 67,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 75,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    direction: "horizontal",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "SP4",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.AddItem, {
    dataHook: "multi-level-sorting-add-sort",
    disabled: !multiLevelSorting.hasAvailableSortingColumns,
    onClick: () => {
      multiLevelSorting.addSort({
        manual: true
      });
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 13
    }
  }, t('cairo.table.advanced-sorting.cta'))))));
}
const MultiLevelSortingPanel = exports.MultiLevelSortingPanel = (0, _mobxReactLite.observer)(_MultiLevelSortingPanel);
//# sourceMappingURL=MultiLevelSortingPanel.js.map