"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = GlobalStylesUIWrapper;
exports.useSection = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _router = require("@wordpress/router");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _url = require("@wordpress/url");
var _icons = require("@wordpress/icons");
var _ui = _interopRequireDefault(require("../global-styles/ui"));
var _page = _interopRequireDefault(require("../page"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useLocation,
  useHistory
} = (0, _lockUnlock.unlock)(_router.privateApis);
const GlobalStylesPageActions = ({
  isStyleBookOpened,
  setIsStyleBookOpened,
  path
}) => {
  const history = useHistory();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
    isPressed: isStyleBookOpened,
    icon: _icons.seen,
    label: (0, _i18n.__)('Style Book'),
    onClick: () => {
      setIsStyleBookOpened(!isStyleBookOpened);
      const updatedPath = !isStyleBookOpened ? (0, _url.addQueryArgs)(path, {
        preview: 'stylebook'
      }) : (0, _url.removeQueryArgs)(path, 'preview');
      // Navigate to the updated path.
      history.navigate(updatedPath);
    },
    size: "compact"
  });
};

/**
 * Hook to deal with navigation and location state.
 *
 * @return {Array}  The current section and a function to update it.
 */
const useSection = () => {
  const {
    path,
    query
  } = useLocation();
  const history = useHistory();
  return (0, _element.useMemo)(() => {
    var _query$section;
    return [(_query$section = query.section) !== null && _query$section !== void 0 ? _query$section : '/', updatedSection => {
      history.navigate((0, _url.addQueryArgs)(path, {
        section: updatedSection
      }));
    }];
  }, [path, query.section, history]);
};
exports.useSection = useSection;
function GlobalStylesUIWrapper() {
  const {
    path
  } = useLocation();
  const [isStyleBookOpened, setIsStyleBookOpened] = (0, _element.useState)(path.includes('preview=stylebook'));
  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
  const [section, onChangeSection] = useSection();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_page.default, {
      actions: !isMobileViewport ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesPageActions, {
        isStyleBookOpened: isStyleBookOpened,
        setIsStyleBookOpened: setIsStyleBookOpened,
        path: path
      }) : null,
      className: "edit-site-styles",
      title: (0, _i18n.__)('Styles'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.default, {
        path: section,
        onPathChange: onChangeSection
      })
    })
  });
}
//# sourceMappingURL=index.js.map