"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.GlobalStylesMenuSlot = void 0;
var _components = require("@wordpress/components");
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _preferences = require("@wordpress/preferences");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _screenRoot = _interopRequireDefault(require("./screen-root"));
var _screenBlockList = _interopRequireWildcard(require("./screen-block-list"));
var _screenBlock = _interopRequireDefault(require("./screen-block"));
var _screenTypography = _interopRequireDefault(require("./screen-typography"));
var _screenTypographyElement = _interopRequireDefault(require("./screen-typography-element"));
var _fontSize = _interopRequireDefault(require("./font-sizes/font-size"));
var _fontSizes = _interopRequireDefault(require("./font-sizes/font-sizes"));
var _screenColors = _interopRequireDefault(require("./screen-colors"));
var _screenColorPalette = _interopRequireDefault(require("./screen-color-palette"));
var _screenBackground = _interopRequireDefault(require("./screen-background"));
var _screenShadows = require("./screen-shadows");
var _screenLayout = _interopRequireDefault(require("./screen-layout"));
var _screenStyleVariations = _interopRequireDefault(require("./screen-style-variations"));
var _styleBook = _interopRequireDefault(require("../style-book"));
var _screenCss = _interopRequireDefault(require("./screen-css"));
var _screenRevisions = _interopRequireDefault(require("./screen-revisions"));
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _constants = require("../style-book/constants");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const SLOT_FILL_NAME = 'GlobalStylesMenu';
const {
  useGlobalStylesReset
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const {
  Slot: GlobalStylesMenuSlot,
  Fill: GlobalStylesMenuFill
} = (0, _components.createSlotFill)(SLOT_FILL_NAME);
exports.GlobalStylesMenuSlot = GlobalStylesMenuSlot;
function GlobalStylesActionMenu() {
  const [canReset, onReset] = useGlobalStylesReset();
  const {
    toggle
  } = (0, _data.useDispatch)(_preferences.store);
  const {
    canEditCSS
  } = (0, _data.useSelect)(select => {
    const {
      getEntityRecord,
      __experimentalGetCurrentGlobalStylesId
    } = select(_coreData.store);
    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
    const globalStyles = globalStylesId ? getEntityRecord('root', 'globalStyles', globalStylesId) : undefined;
    return {
      canEditCSS: !!globalStyles?._links?.['wp:action-edit-css']
    };
  }, []);
  const {
    setEditorCanvasContainerView
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const loadCustomCSS = () => {
    setEditorCanvasContainerView('global-styles-css');
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesMenuFill, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
      icon: _icons.moreVertical,
      label: (0, _i18n.__)('More'),
      toggleProps: {
        size: 'compact'
      },
      children: ({
        onClose
      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
          children: [canEditCSS && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
            onClick: loadCustomCSS,
            children: (0, _i18n.__)('Additional CSS')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
            onClick: () => {
              toggle('core/edit-site', 'welcomeGuideStyles');
              onClose();
            },
            children: (0, _i18n.__)('Welcome Guide')
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
            onClick: () => {
              onReset();
              onClose();
            },
            disabled: !canReset,
            children: (0, _i18n.__)('Reset styles')
          })
        })]
      })
    })
  });
}
function GlobalStylesNavigationScreen({
  className,
  ...props
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.Screen, {
    className: ['edit-site-global-styles-sidebar__navigator-screen', className].filter(Boolean).join(' '),
    ...props
  });
}
function BlockStylesNavigationScreens({
  parentMenu,
  blockStyles,
  blockName
}) {
  return blockStyles.map((style, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
    path: parentMenu + '/variations/' + style.name,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlock.default, {
      name: blockName,
      variation: style.name
    })
  }, index));
}
function ContextScreens({
  name,
  parentMenu = ''
}) {
  const blockStyleVariations = (0, _data.useSelect)(select => {
    const {
      getBlockStyles
    } = select(_blocks.store);
    return getBlockStyles(name);
  }, [name]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: parentMenu + '/colors/palette',
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenColorPalette.default, {
        name: name
      })
    }), !!blockStyleVariations?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockStylesNavigationScreens, {
      parentMenu: parentMenu,
      blockStyles: blockStyleVariations,
      blockName: name
    })]
  });
}
function GlobalStylesStyleBook() {
  const navigator = (0, _components.useNavigator)();
  const {
    path
  } = navigator.location;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styleBook.default, {
    isSelected: blockName =>
    // Match '/blocks/core%2Fbutton' and
    // '/blocks/core%2Fbutton/typography', but not
    // '/blocks/core%2Fbuttons'.
    path === `/blocks/${encodeURIComponent(blockName)}` || path.startsWith(`/blocks/${encodeURIComponent(blockName)}/`),
    onSelect: blockName => {
      if (_constants.STYLE_BOOK_COLOR_GROUPS.find(group => group.slug === blockName)) {
        // Go to color palettes Global Styles.
        navigator.goTo('/colors/palette');
        return;
      }
      if (blockName === 'typography') {
        // Go to typography Global Styles.
        navigator.goTo('/typography');
        return;
      }

      // Now go to the selected block.
      navigator.goTo('/blocks/' + encodeURIComponent(blockName));
    }
  });
}
function GlobalStylesBlockLink() {
  const navigator = (0, _components.useNavigator)();
  const {
    selectedBlockName,
    selectedBlockClientId
  } = (0, _data.useSelect)(select => {
    const {
      getSelectedBlockClientId,
      getBlockName
    } = select(_blockEditor.store);
    const clientId = getSelectedBlockClientId();
    return {
      selectedBlockName: getBlockName(clientId),
      selectedBlockClientId: clientId
    };
  }, []);
  const blockHasGlobalStyles = (0, _screenBlockList.useBlockHasGlobalStyles)(selectedBlockName);
  // When we're in the `Blocks` screen enable deep linking to the selected block.
  (0, _element.useEffect)(() => {
    if (!selectedBlockClientId || !blockHasGlobalStyles) {
      return;
    }
    const currentPath = navigator.location.path;
    if (currentPath !== '/blocks' && !currentPath.startsWith('/blocks/')) {
      return;
    }
    const newPath = '/blocks/' + encodeURIComponent(selectedBlockName);
    // Avoid navigating to the same path. This can happen when selecting
    // a new block of the same type.
    if (newPath !== currentPath) {
      navigator.goTo(newPath, {
        skipFocus: true
      });
    }
  }, [selectedBlockClientId, selectedBlockName, blockHasGlobalStyles]);
}
function GlobalStylesEditorCanvasContainerLink() {
  const {
    goTo,
    location
  } = (0, _components.useNavigator)();
  const editorCanvasContainerView = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
  const path = location?.path;
  const isRevisionsOpen = path === '/revisions';

  // If the user switches the editor canvas container view, redirect
  // to the appropriate screen. This effectively allows deep linking to the
  // desired screens from outside the global styles navigation provider.
  (0, _element.useEffect)(() => {
    switch (editorCanvasContainerView) {
      case 'global-styles-revisions':
      case 'global-styles-revisions:style-book':
        if (!isRevisionsOpen) {
          goTo('/revisions');
        }
        break;
      case 'global-styles-css':
        goTo('/css');
        break;
      // The stand-alone style book is open
      // and the revisions panel is open,
      // close the revisions panel.
      // Otherwise keep the style book open while
      // browsing global styles panel.
      //
      // Falling through as it matches the default scenario.
      case 'style-book':
      default:
        // In general, if the revision screen is in view but the
        // `editorCanvasContainerView` is not a revision view, close it.
        // This also includes the scenario when the stand-alone style
        // book is open, in which case we want the user to close the
        // revisions screen and browse global styles.
        if (isRevisionsOpen) {
          goTo('/', {
            isBack: true
          });
        }
        break;
    }
  }, [editorCanvasContainerView, isRevisionsOpen, goTo]);
}
function useNavigatorSync(parentPath, onPathChange) {
  const navigator = (0, _components.useNavigator)();
  const {
    path: childPath
  } = navigator.location;
  const previousParentPath = (0, _compose.usePrevious)(parentPath);
  const previousChildPath = (0, _compose.usePrevious)(childPath);
  (0, _element.useEffect)(() => {
    if (parentPath !== childPath) {
      if (parentPath !== previousParentPath) {
        navigator.goTo(parentPath);
      } else if (childPath !== previousChildPath) {
        onPathChange(childPath);
      }
    }
  }, [onPathChange, parentPath, previousChildPath, previousParentPath, childPath, navigator]);
}

// This component is used to wrap the hook in order to conditionally execute it
// when the parent component is used on controlled mode.
function NavigationSync({
  path: parentPath,
  onPathChange,
  children
}) {
  useNavigatorSync(parentPath, onPathChange);
  return children;
}
function GlobalStylesUI({
  path,
  onPathChange
}) {
  const blocks = (0, _blocks.getBlockTypes)();
  const editorCanvasContainerView = (0, _data.useSelect)(select => (0, _lockUnlock.unlock)(select(_store.store)).getEditorCanvasContainerView(), []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Navigator, {
    className: "edit-site-global-styles-sidebar__navigator-provider",
    initialPath: "/",
    children: [path && onPathChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationSync, {
      path: path,
      onPathChange: onPathChange
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenRoot.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/variations",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenStyleVariations.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/blocks",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlockList.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypography.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/font-sizes",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizes.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/font-sizes/:origin/:slug",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSize.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/text",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
        element: "text"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/link",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
        element: "link"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/heading",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
        element: "heading"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/caption",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
        element: "caption"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/typography/button",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenTypographyElement.default, {
        element: "button"
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/colors",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenColors.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/shadows",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShadows.ScreenShadows, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/shadows/edit/:category/:slug",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShadows.ScreenShadowsEdit, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/layout",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenLayout.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/css",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenCss.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/revisions",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenRevisions.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: "/background",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBackground.default, {})
    }), blocks.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesNavigationScreen, {
      path: '/blocks/' + encodeURIComponent(block.name),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenBlock.default, {
        name: block.name
      })
    }, 'menu-block-' + block.name)), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextScreens, {}), blocks.map(block => /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextScreens, {
      name: block.name,
      parentMenu: '/blocks/' + encodeURIComponent(block.name)
    }, 'screens-block-' + block.name)), 'style-book' === editorCanvasContainerView && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesStyleBook, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesActionMenu, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesBlockLink, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalStylesEditorCanvasContainerLink, {})]
  });
}
var _default = exports.default = GlobalStylesUI;
//# sourceMappingURL=ui.js.map