"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Picker = void 0;
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _PickerEmptyStateContainer = require("../PickerEmptyState/PickerEmptyStateContainer");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/Picker/Picker.tsx";
function _Picker(props) {
  const {
    state,
    renderEmptyState,
    renderError,
    dataHook,
    children,
    flex,
    hasFilterDropdown
  } = props;
  const {
    collection,
    minContentHeight
  } = state;
  const {
    showRefreshLoader,
    result: {
      status,
      isEmptyAndNotFetching
    }
  } = collection;
  let child;
  if (status.isIdle || showRefreshLoader) {
    // the loader container should be according to the last number of items height (`contentHeight`)
    child = /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonGroup, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 48,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      width: "100%",
      minHeight: minContentHeight,
      dataHook: "search-loader",
      gap: "0",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 9
      }
    }, Array.from({
      length: 8
    }).map((_, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      key: index,
      direction: "horizontal",
      gap: "24px",
      padding: "12px 24px",
      align: "center",
      verticalAlign: "middle",
      justifyItems: "center",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 58,
        columnNumber: 15
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonCircle, {
      diameter: "48px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 67,
        columnNumber: 17
      }
    }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      gap: "6px",
      flex: "1",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 68,
        columnNumber: 17
      }
    }, /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
      width: "120px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 19
      }
    }), /*#__PURE__*/_react.default.createElement(_designSystem.SkeletonLine, {
      width: "240px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 70,
        columnNumber: 19
      }
    })))))));
  } else if (status.isError) {
    child = renderError({
      err: status.error,
      isOnline: collection.isOnline()
    });
    child = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      align: "center",
      verticalAlign: "middle",
      paddingTop: "SP2",
      paddingBottom: "SP9",
      height: "100%",
      minHeight: minContentHeight,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 84,
        columnNumber: 7
      }
    }, child);
    child = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      direction: "vertical",
      overflow: "auto",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 97,
        columnNumber: 7
      }
    }, child);
  } else if (isEmptyAndNotFetching) {
    child = /*#__PURE__*/_react.default.createElement(_PickerEmptyStateContainer.PickerEmptyStateContainer, {
      state: state,
      hasFilterDropdown: hasFilterDropdown,
      renderEmptyState: renderEmptyState,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 103,
        columnNumber: 7
      }
    });
  } else {
    child = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
      minHeight: minContentHeight,
      direction: "vertical",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 111,
        columnNumber: 7
      }
    }, children);
  }
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: dataHook,
    direction: "vertical",
    overflow: "hidden",
    flex: flex,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 118,
      columnNumber: 5
    }
  }, child);
}
const Picker = exports.Picker = (0, _mobxReactLite.observer)(_Picker);
//# sourceMappingURL=Picker.js.map