var _templateObject;

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

import React, { useState, useEffect, useCallback } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import { Aside, ComponentsProvider, Divider, Heading, IconButton, Layout, Page, Space } from '@looker/components';
import { FirstPage } from '@styled-icons/material/FirstPage';
import { LastPage } from '@styled-icons/material/LastPage';
import { registerEnvAdaptor, unregisterEnvAdaptor } from '@looker/extension-utils';
import { useSelector } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { Header, SideNav, ErrorBoundary, SelectorContainer, HEADER_TOGGLE_LABEL, Loader, Banner } from './components';
import { AppRouter } from './routes';
import { apixFilesHost } from './utils/lodeUtils';
import { useSettingActions, useSettingStoreState, useLodeActions, useLodesStoreState, useSpecActions, useSpecStoreState, selectSpecs, selectCurrentSpec } from './state';
import { getSpecKey, diffPath } from './utils';
var BodyOverride = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral([" html { height: 100%; overflow: hidden; } "])));
export var ApiExplorer = _ref => {
  var _location$pathname2;

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

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

  var hasNavigationToggle = useCallback(e => {
    if (e.origin === window.origin && e.data.action === 'toggle_sidebar') {
      setHasNavigation(currentHasNavigation => !currentHasNavigation);
    }
  }, []);
  registerEnvAdaptor(adaptor);
  useEffect(() => {
    initSettingsAction();
    initLodesAction({
      examplesLodeUrl,
      declarationsLodeUrl
    });
    var specKey = getSpecKey(location);
    initSpecsAction({
      specKey
    });
    return () => unregisterEnvAdaptor();
  }, []);
  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 !== diffPath && maybeSpec !== spec.key) {
      setCurrentSpecAction({
        currentSpecKey: maybeSpec
      });
    }
  }, [location.pathname, spec]);
  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 === diffPath) {
    neededSpec = spec === null || spec === void 0 ? void 0 : spec.key;
  }

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