"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ApiExplorer = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _components = require("@looker/components");

var _FirstPage = require("@styled-icons/material/FirstPage");

var _LastPage = require("@styled-icons/material/LastPage");

var _extensionUtils = require("@looker/extension-utils");

var _reactRedux = require("react-redux");

var _reactRouterDom = require("react-router-dom");

var _components2 = require("./components");

var _routes = require("./routes");

var _lodeUtils = require("./utils/lodeUtils");

var _state = require("./state");

var _utils = require("./utils");

var _templateObject;

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var BodyOverride = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral([" html { height: 100%; overflow: hidden; } "])));

var ApiExplorer = _ref => {
  var _location$pathname2;

  var {
    adaptor,
    examplesLodeUrl = 'https://raw.githubusercontent.com/looker-open-source/sdk-codegen/main/examplesIndex.json',
    declarationsLodeUrl = "".concat(_lodeUtils.apixFilesHost, "/declarationsIndex.json"),
    headless = false
  } = _ref;
  (0, _state.useSettingStoreState)();
  (0, _state.useLodesStoreState)();
  var {
    working,
    description
  } = (0, _state.useSpecStoreState)();
  var specs = (0, _reactRedux.useSelector)(_state.selectSpecs);
  var spec = (0, _reactRedux.useSelector)(_state.selectCurrentSpec);
  var {
    initLodesAction
  } = (0, _state.useLodeActions)();
  var {
    initSettingsAction
  } = (0, _state.useSettingActions)();
  var {
    initSpecsAction,
    setCurrentSpecAction
  } = (0, _state.useSpecActions)();
  var location = (0, _reactRouterDom.useLocation)();
  var [hasNavigation, setHasNavigation] = (0, _react.useState)(true);

  var toggleNavigation = target => setHasNavigation(target || !hasNavigation);

  var hasNavigationToggle = (0, _react.useCallback)(e => {
    if (e.origin === window.origin && e.data.action === 'toggle_sidebar') {
      setHasNavigation(currentHasNavigation => !currentHasNavigation);
    }
  }, []);
  (0, _extensionUtils.registerEnvAdaptor)(adaptor);
  (0, _react.useEffect)(() => {
    initSettingsAction();
    initLodesAction({
      examplesLodeUrl,
      declarationsLodeUrl
    });
    var specKey = (0, _utils.getSpecKey)(location);
    initSpecsAction({
      specKey
    });
    return () => (0, _extensionUtils.unregisterEnvAdaptor)();
  }, []);
  (0, _react.useEffect)(() => {
    var _location$pathname;

    var maybeSpec = (_location$pathname = location.pathname) === null || _location$pathname === void 0 ? void 0 : _location$pathname.split('/')[1];

    if (spec && maybeSpec && maybeSpec !== _utils.diffPath && maybeSpec !== spec.key) {
      setCurrentSpecAction({
        currentSpecKey: maybeSpec
      });
    }
  }, [location.pathname, spec]);
  (0, _react.useEffect)(() => {
    if (headless) {
      window.addEventListener('message', hasNavigationToggle);
    }

    return () => {
      if (headless) {
        window.removeEventListener('message', hasNavigationToggle);
      }
    };
  }, [headless, hasNavigationToggle]);
  var themeOverrides = adaptor.themeOverrides();
  var neededSpec = (_location$pathname2 = location.pathname) === null || _location$pathname2 === void 0 ? void 0 : _location$pathname2.split('/')[1];

  if (!neededSpec || neededSpec === _utils.diffPath) {
    neededSpec = spec === null || spec === void 0 ? void 0 : spec.key;
  }

  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_components.ComponentsProvider, {
    loadGoogleFonts: themeOverrides.loadGoogleFonts,
    themeCustomizations: themeOverrides.themeCustomizations
  }, working || !neededSpec || neededSpec !== spec.key ? _react.default.createElement(_components2.Loader, {
    message: description,
    themeOverrides: themeOverrides
  }) : _react.default.createElement(_components2.ErrorBoundary, {
    logError: adaptor.logError.bind(adaptor)
  }, _react.default.createElement(_components2.Banner, {
    adaptor: adaptor,
    specs: specs
  }), _react.default.createElement(_components.Page, {
    style: {
      overflow: 'hidden'
    }
  }, !headless && _react.default.createElement(_components2.Header, {
    spec: spec,
    toggleNavigation: toggleNavigation
  }), _react.default.createElement(_components.Layout, {
    hasAside: true,
    height: "100%"
  }, _react.default.createElement(AsideBorder, {
    borderRight: true,
    isOpen: hasNavigation,
    headless: headless
  }, headless && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_components.Space, {
    alignItems: "center",
    py: "u3",
    px: hasNavigation ? 'u5' : '0',
    justifyContent: hasNavigation ? 'space-between' : 'center'
  }, hasNavigation && _react.default.createElement(_components.Heading, {
    as: "h2",
    fontSize: "xsmall",
    fontWeight: "bold",
    color: "text2"
  }, "API DOCUMENTATION"), _react.default.createElement(_components.IconButton, {
    size: "xsmall",
    shape: "round",
    icon: hasNavigation ? _react.default.createElement(_FirstPage.FirstPage, null) : _react.default.createElement(_LastPage.LastPage, null),
    label: _components2.HEADER_TOGGLE_LABEL,
    onClick: () => toggleNavigation()
  })), hasNavigation && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_components.Divider, {
    mb: "u3",
    appearance: "light"
  }), _react.default.createElement(_components2.SelectorContainer, {
    spec: spec,
    ml: "large",
    mr: "large"
  }))), hasNavigation && _react.default.createElement(_components2.SideNav, {
    headless: headless,
    spec: spec
  })), _react.default.createElement(_routes.AppRouter, {
    specKey: spec.key,
    api: spec.api,
    specs: specs,
    toggleNavigation: toggleNavigation
  }))))), !headless && _react.default.createElement(BodyOverride, null));
};

exports.ApiExplorer = ApiExplorer;
var AsideBorder = (0, _styledComponents.default)(_components.Aside).withConfig({
  displayName: "ApiExplorer__AsideBorder",
  componentId: "sc-1ynh530-0"
})(["width:", ";"], _ref2 => {
  var {
    isOpen,
    headless
  } = _ref2;
  return isOpen ? '20rem' : headless ? '2.75rem' : '0rem';
});
//# sourceMappingURL=ApiExplorer.js.map