"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.PickerListContent = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _useCollectionReachBottom = require("../useCollectionReachBottom");
var _designSystem = require("@wix/design-system");
var _InfiniteScrollLoader = require("../InfiniteScrollLoader/InfiniteScrollLoader");
var _reactTransitionGroup = require("react-transition-group");
var _useIsScrollTop = require("../../hooks/useIsScrollTop");
var _Fade = require("../Fade");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/PickerListContent/PickerListContent.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _PickerListContent(props) {
  const {
    state,
    renderItem,
    spacing = 30,
    multiple,
    ...rest
  } = props;
  const {
    collection
  } = state;
  const {
    result: {
      keyedItems
    }
  } = collection;
  const scrollRef = (0, _react.useRef)(null);
  const {
    targetRef
  } = (0, _useCollectionReachBottom.useCollectionReachBottom)({
    collection,
    containerRef: scrollRef
  });
  const isScrollTop = (0, _useIsScrollTop.useIsScrollTop)(scrollRef);
  (0, _react.useEffect)(() => {
    state.updateIsScrollTop(isScrollTop);
  }, [isScrollTop]);
  const listItems = keyedItems.map((keyedItem, index) => {
    const {
      type: PickerListItem,
      props: pickerListItemProps
    } = renderItem(keyedItem, index);
    return /*#__PURE__*/_react.default.createElement(PickerListItem, (0, _extends2.default)({
      dataHook: "selector-list-selector",
      key: keyedItem.key,
      keyedItem: keyedItem,
      state: state,
      multiple: multiple
    }, pickerListItemProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 7
      }
    }));
  });
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    ref: scrollRef
  }, rest, {
    "data-hook": "selector-list-content",
    style: {
      height: 'inherit',
      overflow: 'auto',
      ...rest.style
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 62,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 7
    }
  }, listItems.flatMap((child, index, {
    length
  }) => {
    return /*#__PURE__*/_react.default.createElement(_Fade.Fade, {
      key: child.key,
      timeout: 300,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      dataHook: "picker-list-fade-item",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 76,
        columnNumber: 15
      }
    }, child, index !== length - 1 && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      paddingLeft: "SP5",
      paddingRight: "SP5",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 79,
        columnNumber: 19
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      width: "100%",
      height: "1px",
      backgroundColor: "D60",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 80,
        columnNumber: 21
      }
    }))));
  })), /*#__PURE__*/_react.default.createElement(_InfiniteScrollLoader.InfiniteScrollLoader, {
    targetRef: targetRef,
    state: collection,
    size: "small",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 7
    }
  }));
}
const PickerListContent = exports.PickerListContent = (0, _mobxReactLite.observer)(_PickerListContent);
//# sourceMappingURL=PickerListContent.js.map