"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ElementItem = ElementItem;
exports.itemIcon = exports.default = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
var _Collection = require("react-virtualized/dist/commonjs/Collection");
var _analyticsNext = require("@atlaskit/analytics-next");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _menu = require("@atlaskit/menu");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("@atlaskit/theme/constants");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _analytics = require("../../../analytics");
var _quickInsert = require("../../../quick-insert");
var _constants2 = require("../../constants");
var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
var _types = require("../../types");
var _cellSizeAndPositionGetter = _interopRequireDefault(require("./cellSizeAndPositionGetter"));
var _EmptyState = _interopRequireDefault(require("./EmptyState"));
var _utils = require("./utils");
var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
/** @jsx jsx */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
var ICON_WIDTH = exports.ICON_WIDTH = 40;
var itemIcon = exports.itemIcon = (0, _react2.css)({
  width: "".concat(ICON_WIDTH, "px"),
  height: "".concat(ICON_HEIGHT, "px"),
  overflow: 'hidden',
  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
  boxSizing: 'border-box',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  div: {
    width: "".concat(ICON_WIDTH, "px"),
    height: "".concat(ICON_HEIGHT, "px")
  }
});
function ElementList(_ref) {
  var items = _ref.items,
    mode = _ref.mode,
    selectedItemIndex = _ref.selectedItemIndex,
    focusedItemIndex = _ref.focusedItemIndex,
    setColumnCount = _ref.setColumnCount,
    createAnalyticsEvent = _ref.createAnalyticsEvent,
    emptyStateHandler = _ref.emptyStateHandler,
    selectedCategory = _ref.selectedCategory,
    searchTerm = _ref.searchTerm,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _useContainerWidth = (0, _useContainerWidth2.default)(),
    containerWidth = _useContainerWidth.containerWidth,
    ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
  var _useState = (0, _react.useState)(_constants2.SCROLLBAR_WIDTH),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    scrollbarWidth = _useState2[0],
    setScrollbarWidth = _useState2[1];
  var fullMode = mode === _types.Modes.full;
  (0, _react.useEffect)(function () {
    /**
     * More of an optimization condition.
     * Initially the containerWidths are reported 0 twice.
     **/
    if (fullMode && containerWidth > 0) {
      setColumnCount((0, _utils.getColumnCount)(containerWidth));
      var updatedScrollbarWidth = (0, _utils.getScrollbarWidth)();
      if (updatedScrollbarWidth > 0) {
        setScrollbarWidth(updatedScrollbarWidth);
      }
    }
  }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
  var onExternalLinkClick = (0, _react.useCallback)(function () {
    (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
      payload: {
        action: _analytics.ACTION.VISITED,
        actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
        eventType: _analytics.EVENT_TYPE.TRACK
      }
    });
  }, [createAnalyticsEvent]);
  var cellRenderer = (0, _react.useMemo)(function () {
    return function (_ref2) {
      var index = _ref2.index,
        key = _ref2.key,
        style = _ref2.style;
      if (items[index] == null) {
        return;
      }
      return (0, _react2.jsx)("div", {
        style: style,
        key: key,
        className: "element-item-wrapper",
        css: elementItemWrapper
      }, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
        inlineMode: !fullMode,
        index: index,
        item: items[index],
        selected: selectedItemIndex === index,
        focus: focusedItemIndex === index
      }, props)));
    };
  }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
    css: elementItemsWrapper,
    "data-testid": "element-items",
    id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
    "aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
    role: "tabpanel",
    tabIndex: items.length === 0 ? 0 : undefined
  }, !items.length ? emptyStateHandler ? emptyStateHandler({
    mode: mode,
    selectedCategory: selectedCategory,
    searchTerm: searchTerm
  }) : (0, _react2.jsx)(_EmptyState.default, {
    onExternalLinkClick: onExternalLinkClick
  }) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
    disableWidth: true
  }, function (_ref3) {
    var height = _ref3.height;
    return (0, _react2.jsx)(_Collection.Collection, {
      cellCount: items.length,
      cellRenderer: cellRenderer,
      cellSizeAndPositionGetter: (0, _cellSizeAndPositionGetter.default)(containerWidth - _constants2.ELEMENT_LIST_PADDING * 2, scrollbarWidth),
      height: height,
      width: containerWidth - _constants2.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
      /**
       * Refresh Collection on WidthObserver value change.
       * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
       * scroll position after updating the data. If new data has different number of cells, a re-render
       * is forced to prevent the scroll position render bug.
       */,
      key: containerWidth + items.length,
      scrollToCell: selectedItemIndex
    });
  }))));
}
var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
MemoizedElementItem.displayName = 'MemoizedElementItem';
function ElementItem(_ref4) {
  var inlineMode = _ref4.inlineMode,
    selected = _ref4.selected,
    item = _ref4.item,
    index = _ref4.index,
    onInsertItem = _ref4.onInsertItem,
    focus = _ref4.focus,
    setFocusedItemIndex = _ref4.setFocusedItemIndex;
  var ref = (0, _useFocus.default)(focus);

  /**
   * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
   * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
   * This implementation was changed for keyboard/click selection to work with `onInsertItem`.
   */
  var onClick = (0, _react.useCallback)(function (e) {
    e.preventDefault();
    e.stopPropagation();
    setFocusedItemIndex(index);
    switch (e.nativeEvent.detail) {
      case 0:
        onInsertItem(item);
        break;
      case 1:
        if (inlineMode) {
          onInsertItem(item);
        }
        break;
      case 2:
        if (!inlineMode) {
          onInsertItem(item);
        }
        break;
      default:
        return;
    }
  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
  var icon = item.icon,
    title = item.title,
    description = item.description,
    keyshortcut = item.keyshortcut;
  return (0, _react2.jsx)(_tooltip.default, {
    content: description,
    testId: "element-item-tooltip-".concat(index)
  }, (0, _react2.jsx)(_menu.ButtonItem, {
    onClick: onClick,
    iconBefore: (0, _react2.jsx)(ElementBefore, {
      icon: icon,
      title: title
    }),
    isSelected: selected,
    "aria-describedby": title,
    ref: ref,
    testId: "element-item-".concat(index),
    id: "searched-item-".concat(index)
  }, (0, _react2.jsx)(ItemContent, {
    style: inlineMode ? null : itemStyleOverrides,
    tabIndex: 0,
    title: title,
    description: description,
    keyshortcut: keyshortcut
  })));
}

/**
 * Inline mode should use the existing Align-items:center value.
 */
var itemStyleOverrides = {
  alignItems: 'flex-start'
};
var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
  var icon = _ref5.icon,
    title = _ref5.title;
  return (0, _react2.jsx)("div", {
    css: [itemIcon, itemIconStyle]
  }, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
});
var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
  var title = _ref6.title,
    description = _ref6.description,
    keyshortcut = _ref6.keyshortcut;
  return (0, _react2.jsx)("div", {
    css: itemBody,
    className: "item-body"
  }, (0, _react2.jsx)("div", {
    css: itemText
  }, (0, _react2.jsx)("div", {
    css: itemTitleWrapper
  }, (0, _react2.jsx)("p", {
    css: itemTitle
  }, title), (0, _react2.jsx)("div", {
    css: itemAfter
  }, keyshortcut && (0, _react2.jsx)("div", {
    css: _shortcut.shortcutStyle
  }, keyshortcut))), description && (0, _react2.jsx)("p", {
    css: itemDescription
  }, description)));
});
var elementItemsWrapper = (0, _react2.css)({
  flex: 1,
  flexFlow: 'row wrap',
  alignItems: 'flex-start',
  justifyContent: 'flex-start',
  overflow: 'hidden',
  padding: "var(--ds-space-025, 2px)",
  '.ReactVirtualized__Collection': {
    borderRadius: '3px',
    outline: 'none',
    ':focus': {
      boxShadow: "0 0 0 ".concat(_constants2.ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
    }
  },
  '.ReactVirtualized__Collection__innerScrollContainer': {
    "div[class='element-item-wrapper']:last-child": {
      paddingBottom: "var(--ds-space-050, 4px)"
    }
  }
});
var elementItemWrapper = (0, _react2.css)({
  div: {
    button: {
      height: '75px',
      alignItems: 'flex-start',
      padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
    }
  }
});
var itemBody = (0, _react2.css)({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'nowrap',
  justifyContent: 'space-between',
  lineHeight: 1.4,
  width: '100%',
  marginTop: "var(--ds-space-negative-025, -2px)"
});

/*
 * -webkit-line-clamp is also supported by firefox 🎉
 * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
 */
var multilineStyle = (0, _react2.css)({
  display: '-webkit-box',
  WebkitLineClamp: 2,
  WebkitBoxOrient: 'vertical'
});
var itemDescription = (0, _react2.css)(multilineStyle, {
  overflow: 'hidden',
  fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67),
  color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
  marginTop: "var(--ds-space-025, 2px)"
});
var itemText = (0, _react2.css)({
  width: 'inherit',
  whiteSpace: 'initial'
});
var itemTitleWrapper = (0, _react2.css)({
  display: 'flex',
  justifyContent: 'space-between'
});
var itemTitle = (0, _react2.css)({
  width: '100%',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
});
var itemAfter = (0, _react2.css)({
  flex: '0 0 auto',
  paddingTop: "var(--ds-space-025, 2px)",
  marginBottom: "var(--ds-space-negative-025, -2px)"
});
var itemIconStyle = (0, _react2.css)({
  img: {
    height: '40px',
    width: '40px',
    objectFit: 'cover'
  }
});
var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
  component: 'ElementList'
})(ElementList));
var _default = exports.default = MemoizedElementListWithAnalytics;