"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Scope = Scope;
function _react() {
  const data = _interopRequireWildcard(require("react"));
  _react = function () {
    return data;
  };
  return data;
}
require("reset-css");
function _classnames() {
  const data = _interopRequireDefault(require("classnames"));
  _classnames = function () {
    return data;
  };
  return data;
}
function _baseUiSurfacesSplitPane() {
  const data = require("@teambit/base-ui.surfaces.split-pane.split-pane");
  _baseUiSurfacesSplitPane = function () {
    return data;
  };
  return data;
}
function _uiFoundationUiReactRouter() {
  const data = require("@teambit/ui-foundation.ui.react-router.slot-router");
  _uiFoundationUiReactRouter = function () {
    return data;
  };
  return data;
}
function _uiFoundationUi() {
  const data = require("@teambit/ui-foundation.ui.corner");
  _uiFoundationUi = function () {
    return data;
  };
  return data;
}
function _uiFoundationUiButtons() {
  const data = require("@teambit/ui-foundation.ui.buttons.collapser");
  _uiFoundationUiButtons = function () {
    return data;
  };
  return data;
}
function _baseUiSurfacesSplitPane2() {
  const data = require("@teambit/base-ui.surfaces.split-pane.hover-splitter");
  _baseUiSurfacesSplitPane2 = function () {
    return data;
  };
  return data;
}
function _uiFoundationUi2() {
  const data = require("@teambit/ui-foundation.ui.top-bar");
  _uiFoundationUi2 = function () {
    return data;
  };
  return data;
}
function _baseUiUtils() {
  const data = require("@teambit/base-ui.utils.composer");
  _baseUiUtils = function () {
    return data;
  };
  return data;
}
function _uiFoundationUi3() {
  const data = require("@teambit/ui-foundation.ui.full-loader");
  _uiFoundationUi3 = function () {
    return data;
  };
  return data;
}
function _reactRouterDom() {
  const data = require("react-router-dom");
  _reactRouterDom = function () {
    return data;
  };
  return data;
}
function _uiFoundationUiHooks() {
  const data = require("@teambit/ui-foundation.ui.hooks.use-is-mobile");
  _uiFoundationUiHooks = function () {
    return data;
  };
  return data;
}
function _scopeUiHooks() {
  const data = require("@teambit/scope.ui.hooks.scope-context");
  _scopeUiHooks = function () {
    return data;
  };
  return data;
}
function _scopeUiHooks2() {
  const data = require("@teambit/scope.ui.hooks.use-scope");
  _scopeUiHooks2 = function () {
    return data;
  };
  return data;
}
function _scopeOverview() {
  const data = require("./scope-overview");
  _scopeOverview = function () {
    return data;
  };
  return data;
}
function _scopeModule() {
  const data = _interopRequireDefault(require("./scope.module.scss"));
  _scopeModule = function () {
    return data;
  };
  return data;
}
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
/**
 * root component of the scope
 */
function Scope({
  routeSlot,
  menuSlot,
  sidebar,
  scopeUi,
  badgeSlot,
  overviewLineSlot,
  cornerSlot,
  PaneWrapper,
  context = [],
  paneClassName,
  TargetScopeOverview,
  TargetCorner,
  onSidebarTogglerChange,
  userUseScopeQuery,
  scopeClassName
}) {
  const {
    scope
  } = userUseScopeQuery ? userUseScopeQuery() : (0, _scopeUiHooks2().useScopeQuery)();
  const isMobile = (0, _uiFoundationUiHooks().useIsMobile)();
  const [isSidebarOpen, handleSidebarToggle] = (0, _react().useReducer)(x => !x, !isMobile);
  const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.right;
  if (!scope) {
    return /*#__PURE__*/_react().default.createElement(_uiFoundationUi3().FullLoader, null);
  }
  const CornerOverride = TargetCorner || cornerSlot?.values()[0];
  scopeUi.setComponents(scope.components);
  const Context = context.map(ctx => [ctx, {
    scope
  }]);
  onSidebarTogglerChange(handleSidebarToggle);
  return /*#__PURE__*/_react().default.createElement(_scopeUiHooks().ScopeProvider, {
    scope: scope
  }, /*#__PURE__*/_react().default.createElement(_baseUiUtils().Composer, {
    components: Context
  }, /*#__PURE__*/_react().default.createElement("div", {
    className: (0, _classnames().default)(_scopeModule().default.scope, scopeClassName)
  }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().TopBar, {
    className: _scopeModule().default.topbar,
    Corner: () => {
      if (CornerOverride) return /*#__PURE__*/_react().default.createElement(CornerOverride, null);
      return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Corner, {
        name: scope.name,
        className: _scopeModule().default.whiteCorner
      });
    },
    menu: menuSlot
  }), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().SplitPane, {
    className: _scopeModule().default.main,
    size: 264,
    layout: sidebarOpenness
  }, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
    className: (0, _classnames().default)(_scopeModule().default.sidebar, !isSidebarOpen && _scopeModule().default.collapsed)
  }, sidebar), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
    className: _scopeModule().default.splitter
  }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
    isOpen: isSidebarOpen,
    onMouseDown: e => e.stopPropagation() // avoid split-pane drag
    ,
    onClick: handleSidebarToggle,
    tooltipContent: `${isSidebarOpen ? 'Hide' : 'Show'} side panel`
  })),
  /**
   * @hack - discuss with Ran why we need a PaneWrapper as a parent of the Pane
   * conditionally rendering it makes sure that it doesn't break the code tab layout
   */
  PaneWrapper && /*#__PURE__*/_react().default.createElement(PaneContainer, {
    Wrapper: PaneWrapper
  }, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
    className: (0, _classnames().default)(paneClassName, _scopeModule().default.pane)
  }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
    slot: routeSlot
  }, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
    index: true,
    element: /*#__PURE__*/_react().default.createElement(_scopeOverview().ScopeOverview, {
      badgeSlot: badgeSlot,
      overviewSlot: overviewLineSlot,
      TargetOverview: TargetScopeOverview
    })
  })))) || /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
    className: (0, _classnames().default)(paneClassName, _scopeModule().default.pane)
  }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiReactRouter().SlotRouter, {
    slot: routeSlot
  }, /*#__PURE__*/_react().default.createElement(_reactRouterDom().Route, {
    index: true,
    element: /*#__PURE__*/_react().default.createElement(_scopeOverview().ScopeOverview, {
      badgeSlot: badgeSlot,
      overviewSlot: overviewLineSlot,
      TargetOverview: TargetScopeOverview
    })
  })))))));
}
function PaneContainer({
  children,
  Wrapper
}) {
  return /*#__PURE__*/_react().default.createElement(Wrapper, null, children);
}

//# sourceMappingURL=scope.js.map