"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = GlobalStylesSidebar;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _preferences = require("@wordpress/preferences");
var _editor = require("@wordpress/editor");
var _compose = require("@wordpress/compose");
var _router = require("@wordpress/router");
var _globalStyles = require("../global-styles");
var _store = require("../../store");
var _ui = require("../global-styles/ui");
var _lockUnlock = require("../../lock-unlock");
var _coreData = require("@wordpress/core-data");
var _defaultSidebar = _interopRequireDefault(require("./default-sidebar"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  interfaceStore
} = (0, _lockUnlock.unlock)(_editor.privateApis);
const {
  useLocation
} = (0, _lockUnlock.unlock)(_router.privateApis);
function GlobalStylesSidebar() {
  const {
    query
  } = useLocation();
  const {
    canvas = 'view',
    name
  } = query;
  const {
    shouldClearCanvasContainerView,
    isStyleBookOpened,
    showListViewByDefault,
    hasRevisions,
    isRevisionsOpened,
    isRevisionsStyleBookOpened
  } = (0, _data.useSelect)(select => {
    const {
      getActiveComplementaryArea
    } = select(interfaceStore);
    const {
      getEditorCanvasContainerView
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const canvasContainerView = getEditorCanvasContainerView();
    const _isVisualEditorMode = 'visual' === select(_editor.store).getEditorMode();
    const _isEditCanvasMode = 'edit' === canvas;
    const _showListViewByDefault = select(_preferences.store).get('core', 'showListViewByDefault');
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId
    } = select(_coreData.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
    return {
      isStyleBookOpened: 'style-book' === canvasContainerView,
      shouldClearCanvasContainerView: 'edit-site/global-styles' !== getActiveComplementaryArea('core') || !_isVisualEditorMode || !_isEditCanvasMode,
      showListViewByDefault: _showListViewByDefault,
      hasRevisions: !!globalStyles?._links?.['version-history']?.[0]?.count,
      isRevisionsStyleBookOpened: 'global-styles-revisions:style-book' === canvasContainerView,
      isRevisionsOpened: 'global-styles-revisions' === canvasContainerView
    };
  }, [canvas]);
  const {
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
  (0, _element.useEffect)(() => {
    if (shouldClearCanvasContainerView) {
      setEditorCanvasContainerView(undefined);
    }
  }, [shouldClearCanvasContainerView, setEditorCanvasContainerView]);
  const {
    setIsListViewOpened
  } = (0, _data.useDispatch)(_editor.store);
  const toggleRevisions = () => {
    setIsListViewOpened(false);
    if (isRevisionsStyleBookOpened) {
      setEditorCanvasContainerView('style-book');
      return;
    }
    if (isRevisionsOpened) {
      setEditorCanvasContainerView(undefined);
      return;
    }
    if (isStyleBookOpened) {
      setEditorCanvasContainerView('global-styles-revisions:style-book');
    } else {
      setEditorCanvasContainerView('global-styles-revisions');
    }
  };
  const toggleStyleBook = () => {
    if (isRevisionsOpened) {
      setEditorCanvasContainerView('global-styles-revisions:style-book');
      return;
    }
    if (isRevisionsStyleBookOpened) {
      setEditorCanvasContainerView('global-styles-revisions');
      return;
    }
    setIsListViewOpened(isStyleBookOpened && showListViewByDefault);
    setEditorCanvasContainerView(isStyleBookOpened ? undefined : 'style-book');
  };
  const {
    getActiveComplementaryArea
  } = (0, _data.useSelect)(interfaceStore);
  const {
    enableComplementaryArea
  } = (0, _data.useDispatch)(interfaceStore);
  const previousActiveAreaRef = (0, _element.useRef)(null);
  (0, _element.useEffect)(() => {
    if (name === 'styles' && canvas === 'edit') {
      previousActiveAreaRef.current = getActiveComplementaryArea('core');
      enableComplementaryArea('core', 'edit-site/global-styles');
    } else if (previousActiveAreaRef.current) {
      enableComplementaryArea('core', previousActiveAreaRef.current);
    }
  }, [name, enableComplementaryArea, canvas, getActiveComplementaryArea]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_defaultSidebar.default, {
    className: "edit-site-global-styles-sidebar",
    identifier: "edit-site/global-styles",
    title: (0, _i18n.__)('Styles'),
    icon: _icons.styles,
    closeLabel: (0, _i18n.__)('Close Styles'),
    panelClassName: "edit-site-global-styles-sidebar__panel",
    header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      className: "edit-site-global-styles-sidebar__header",
      gap: 1,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
          className: "edit-site-global-styles-sidebar__header-title",
          children: (0, _i18n.__)('Styles')
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
        justify: "flex-end",
        gap: 1,
        className: "edit-site-global-styles-sidebar__header-actions",
        children: [!isMobileViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            icon: _icons.seen,
            label: (0, _i18n.__)('Style Book'),
            isPressed: isStyleBookOpened || isRevisionsStyleBookOpened,
            accessibleWhenDisabled: true,
            disabled: shouldClearCanvasContainerView,
            onClick: toggleStyleBook,
            size: "compact"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            label: (0, _i18n.__)('Revisions'),
            icon: _icons.backup,
            onClick: toggleRevisions,
            accessibleWhenDisabled: true,
            disabled: !hasRevisions,
            isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
            size: "compact"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ui.GlobalStylesMenuSlot, {})]
      })]
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_globalStyles.GlobalStylesUI, {})
  });
}
//# sourceMappingURL=index.js.map