"use strict";

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

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

var _reactHelmet = _interopRequireDefault(require("react-helmet"));

var _tagHoc = _interopRequireDefault(require("tag-hoc"));

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

var _redux = require("redux");

var _reselect = require("reselect");

var _componentLink = require("@patternplate/component-link");

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

var actions = _interopRequireWildcard(require("../actions"));

var demo = _interopRequireWildcard(require("../selectors/demo"));

var _logo = _interopRequireDefault(require("./logo"));

var _favicon = _interopRequireDefault(require("./favicon"));

var _indicator = _interopRequireDefault(require("./indicator"));

var _link = _interopRequireDefault(require("./link"));

var _message = _interopRequireDefault(require("./message"));

var _navigation = _interopRequireWildcard(require("./navigation"));

var _toggleNavigation = _interopRequireDefault(require("./toggle-navigation"));

var _toggleSearch = _interopRequireDefault(require("./toggle-search"));

var _search = _interopRequireDefault(require("./search"));

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const selectThemes = (0, _reselect.createSelector)(state => state.config.ui, ui => _components.themes.getThemes(ui));
const selectLines = (0, _reselect.createSelector)(state => state.messages, demo.selectSrc, (messages, src) => (messages[src] || "").split("\n").filter(Boolean));
const selectMessage = (0, _reselect.createSelector)(selectLines, lines => lines.slice(0, 2).map(l => l.trim()).join("\n"));
const selectHasMessage = (0, _reselect.createSelector)(selectMessage, message => typeof message === "string" && message !== "");

function mapProps(state) {
  const q = state.routing.locationBeforeTransitions.query;
  return {
    base: state.base,
    description: state.schema.description,
    lightbox: state.lightbox,
    location: state.routing.locationBeforeTransitions,
    networkEnabled: state.networkEnabled,
    logo: state.config.ui.renderedLogo,
    navigationEnabled: state.navigationEnabled,
    searchEnabled: state.searchEnabled,
    theme: state.theme,
    themes: selectThemes(state),
    title: state.config.title || state.schema.name,
    hasMessage: selectHasMessage(state),
    screenshot: q.screenshot === "true",
    showComponents: state.config.ui.showComponents === undefined ? true : state.config.ui.showComponents,
    jsWarningEnabled: q["js-warning-enabled"] !== "false" && q["js-warning-enabled"] !== false,
    browserWarningEnabled: q["browser-warning-enabled"] !== "false" && q["browser-warning-enabled"] !== false
  };
}

function mapDispatch(dispatch) {
  return (0, _redux.bindActionCreators)({
    onLoad: () => actions.listen({
      url: "api"
    }),
    onResize: actions.windowResize
  }, dispatch);
}

const injections = [{
  target: _componentLink.Link,
  source: _link.default
}, {
  target: _components.Link,
  source: _link.default
}];

class Application extends _react.default.Component {
  componentDidMount() {
    document.body.style.overflow = this.props.screenshot ? "hidden" : "auto";
  }

  componentDidUpdate() {
    document.body.style.overflow = this.props.screenshot ? "hidden" : "auto";
  }

  render() {
    const props = this.props;
    return _react.default.createElement(_components.injection.InjectionProvider, {
      injections: injections
    }, _react.default.createElement(_components.ThemeProvider, {
      theme: props.themes[props.theme]
    }, _react.default.createElement(StyledApplication, {
      screenshot: props.screenshot
    }, _react.default.createElement(_reactHelmet.default, {
      meta: meta(props),
      title: props.title
    }), _react.default.createElement(_favicon.default, null), _react.default.createElement(_components.ThemeProvider, {
      theme: props.themes.dark
    }, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(NavigationControl, {
      "data-toggle-name": "navigation",
      "data-trigger-name": "navigation",
      "data-toggle-enabled": props.navigationEnabled,
      enabled: props.navigationEnabled
    }, _react.default.createElement(_toggleNavigation.default, null)), _react.default.createElement(StyledNavigationBox, {
      "data-toggle-name": "navigation",
      "data-toggle-enabled": props.visible,
      enabled: props.navigationEnabled
    }, _react.default.createElement(_navigation.default, {
      showComponents: props.showComponents
    }, _react.default.createElement(_navigation.NavigationHeader, null, _react.default.createElement(_logo.default, null)), _react.default.createElement(_navigation.NavigationToolbar, null, _react.default.createElement("div", null), _react.default.createElement(_toggleSearch.default, null), _react.default.createElement(_indicator.default, null)))))), _react.default.createElement(StyledContentContainer, {
      "data-scrolling": true
    }, _react.default.createElement(StyledContent, null, props.browserWarningEnabled && _react.default.createElement(StyledBrowserWarning, {
      navigationEnabled: props.navigationEnabled,
      "data-browser-warning": true
    }, _react.default.createElement(StyledBrowserContainer, null, _react.default.createElement(StyledBrowserContent, null, _react.default.createElement(StyledWarningLabel, null, "Nice browser. Is it antique?"), _react.default.createElement(StyledBrowserText, null, "No, seriously - your browser is so old that some features of patternplate don't work as expected."), _react.default.createElement(StyledBrowserText, null, "Don't worry - you can either continue with a restricted version or install an up-to-date browser.")), _react.default.createElement(StyledBrowserContainerClose, {
      title: `Close browser warning`,
      query: {
        "browser-warning-enabled": false
      }
    }, _react.default.createElement(_components.Icon, {
      symbol: "close"
    })))), props.jsWarningEnabled && _react.default.createElement(StyledBrowserWarning, {
      navigationEnabled: props.navigationEnabled,
      "data-js-warning": true
    }, _react.default.createElement(StyledBrowserContainer, null, _react.default.createElement(StyledBrowserContent, null, _react.default.createElement(StyledWarningLabel, null, "We messed up."), _react.default.createElement(StyledBrowserText, null, "Sorry, but your user experience might be affected."), _react.default.createElement(_components.Text, null, "- Try reloading the page"), _react.default.createElement(_components.Text, null, "- Report the problem at github.com/patternplate/patternplate")), _react.default.createElement(StyledBrowserContainerClose, {
      title: `Close browser warning`,
      query: {
        "js-warning-enabled": false
      }
    }, _react.default.createElement(_components.Icon, {
      symbol: "close"
    })))), props.hasMessage && _react.default.createElement(StyledMessageBox, null, _react.default.createElement(_message.default, null)), props.children, props.searchEnabled && _react.default.createElement(_components.ThemeProvider, {
      theme: props.themes.dark
    }, _react.default.createElement(StyledSearchBox, {
      navigationEnabled: props.navigationEnabled,
      screenshot: props.screenshot
    }, _react.default.createElement(StyledSearchFrame, null, _react.default.createElement(_search.default, null)))))))));
  }

}

var _default = (0, _reactRedux.connect)(mapProps, mapDispatch)(Application);

exports.default = _default;
const WIDTH = 300;

const NAVIGATION_WIDTH = props => props.enabled ? WIDTH : 0;

const TOOLBAR_HEIGHT = 60;
const StyledWarningLabel = (0, _components.styled)(_components.Text).withConfig({
  displayName: "application__StyledWarningLabel"
})(["font-weight:bold;margin-bottom:1.3em;"]);

const StyledBrowserWarning = _components.styled.div.withConfig({
  displayName: "application__StyledBrowserWarning"
})(["display:none;box-sizing:border-box;position:absolute;position:sticky;top:0;z-index:4;right:0;left:0;width:100%;padding:15px 20px;padding-left:", "px;background:", ";"], props => props.navigationEnabled ? 20 : 60, props => props.theme.colors.warning);

const StyledBrowserContainer = _components.styled.div.withConfig({
  displayName: "application__StyledBrowserContainer"
})(["position:relative;display:flex;align-items:center;width:100%;max-width:1240px;margin:0 auto;justify-content:space-between;"]);

const StyledBrowserContent = _components.styled.div.withConfig({
  displayName: "application__StyledBrowserContent"
})([""]);

const StyledBrowserText = (0, _components.styled)(_components.Text).withConfig({
  displayName: "application__StyledBrowserText"
})(["margin-bottom:1.3em;"]);
const StyledBrowserContainerClose = (0, _components.styled)(_componentLink.Link).withConfig({
  displayName: "application__StyledBrowserContainerClose"
})(["flex-shrink:0;margin-left:15px;&:link,&:visited,&:active{color:", ";}"], props => props.theme.colors.color);

const StyledApplication = _components.styled.div.withConfig({
  displayName: "application__StyledApplication"
})(["position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;background:", ";", ";"], props => props.theme.colors.background, props => !props.screenshot ? "" : (0, _components.css)(["height:calc(100vh - 100px);width:calc(100vw - 100px);margin:50px;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,0.15);overflow:hidden;"]));

const StyledNavigationBox = (0, _components.styled)((0, _tagHoc.default)(["enabled"])("div")).withConfig({
  displayName: "application__StyledNavigationBox"
})(["position:relative;z-index:2;height:100%;width:", "px;flex:0 0 ", "px;overflow:hidden;&[data-toggle-enabled=\"true\"]{display:block;}&[data-toggle-enabled=\"false\"]{display:none;}"], NAVIGATION_WIDTH, NAVIGATION_WIDTH);

const StyledMessageBox = _components.styled.div.withConfig({
  displayName: "application__StyledMessageBox"
})(["position:absolute;box-sizing:border-box;z-index:3;padding:15px;width:100%;overflow:hidden;"]);

const StyledContent = _components.styled.div.withConfig({
  displayName: "application__StyledContent"
})(["flex:1 1 100%;width:100%;"]);

const StyledContentContainer = _components.styled.div.withConfig({
  displayName: "application__StyledContentContainer"
})(["flex:1 1 calc(100% - ", "px);width:calc(100% - ", "px);flex-direction:column;overflow:auto;position:relative;"], NAVIGATION_WIDTH, NAVIGATION_WIDTH);

const WITH_SCREENSHOT_OFFSET = factor => props => {
  if (props.screenshot) {
    return factor * 50;
  }

  return 0;
};

const WITH_NAVIGATION_OFFSET = factor => props => {
  if (props.navigationEnabled) {
    return factor * 300;
  }

  return 0;
};

const SUM = (...args) => props => args.reduce((acc, fn) => acc + fn(props), 0);

const StyledSearchBox = _components.styled.div.withConfig({
  displayName: "application__StyledSearchBox"
})(["position:fixed;z-index:2;top:12.5vh;bottom:10vh;right:", "px;left:", "px;width:calc( 100% - ", "px );pointer-events:none;"], WITH_SCREENSHOT_OFFSET(1), SUM(WITH_NAVIGATION_OFFSET(1), WITH_SCREENSHOT_OFFSET(1)), SUM(WITH_NAVIGATION_OFFSET(1), WITH_SCREENSHOT_OFFSET(2)));

const StyledSearchFrame = _components.styled.div.withConfig({
  displayName: "application__StyledSearchFrame"
})(["width:90%;min-width:320px;max-width:750px;max-height:100%;margin:0 auto;overflow:hidden;"]);

const StyledFloatingBox = _components.styled.div.withConfig({
  displayName: "application__StyledFloatingBox"
})(["position:absolute;pointer-events:none;z-index:2;right:0;bottom:0;left:0;padding:10px 15px;height:300px;display:flex;"]);

const StyledInfoPane = _components.styled.div.withConfig({
  displayName: "application__StyledInfoPane"
})(["flex:0 0 auto;box-sizing:border-box;pointer-events:all;"]);

const StyledPane = _components.styled.div.withConfig({
  displayName: "application__StyledPane"
})(["flex:1 1 auto;box-sizing:border-box;height:100%;width:100%;overflow:hidden;pointer-events:all;"]);

const NavigationControl = _components.styled.div.withConfig({
  displayName: "application__NavigationControl"
})(["display:flex;align-items:center;justify-content:center;position:absolute;z-index:5;top:0;left:", "px;transform:translate(-", "%);color:", ";width:60px;height:60px;background:", ";&[data-toggle-enabled=\"true\"]{left:300;transform:translate(-100%);color:", ";background:", ";}&[data-toggle-enabled=\"false\"]{left:0;transform:translate(0);color:", ";background:#fff;}@media screen and (min-width:720px){background:transparent;&::before{display:none;}}"], props => props.enabled ? 300 : 0, props => props.enabled ? 100 : 0, props => props.enabled ? props.theme.colors.color : props.theme.colors.background, props => props.enabled ? props.theme.colors.backgroundSecondary : "#fff", props => props.theme.colors.color, props => props.theme.colors.backgroundSecondary, props => props.theme.colors.background);

function meta(props) {
  return [{
    name: "description",
    content: props.description
  }, {
    name: "viewport",
    content: "width=device-width, initial-scale=1"
  }];
}
//# sourceMappingURL=application.js.map