"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = WelcomeGuideStyles;
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _preferences = require("@wordpress/preferences");
var _editor = require("@wordpress/editor");
var _image = _interopRequireDefault(require("./image"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  interfaceStore
} = (0, _lockUnlock.unlock)(_editor.privateApis);
function WelcomeGuideStyles() {
  const {
    toggle
  } = (0, _data.useDispatch)(_preferences.store);
  const {
    isActive,
    isStylesOpen
  } = (0, _data.useSelect)(select => {
    const sidebar = select(interfaceStore).getActiveComplementaryArea('core');
    return {
      isActive: !!select(_preferences.store).get('core/edit-site', 'welcomeGuideStyles'),
      isStylesOpen: sidebar === 'edit-site/global-styles'
    };
  }, []);
  if (!isActive || !isStylesOpen) {
    return null;
  }
  const welcomeLabel = (0, _i18n.__)('Welcome to Styles');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Guide, {
    className: "edit-site-welcome-guide guide-styles",
    contentLabel: welcomeLabel,
    finishButtonText: (0, _i18n.__)('Get started'),
    onFinish: () => toggle('core/edit-site', 'welcomeGuideStyles'),
    pages: [{
      image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
        nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.svg?1",
        animatedSrc: "https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
      }),
      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "edit-site-welcome-guide__heading",
          children: welcomeLabel
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "edit-site-welcome-guide__text",
          children: (0, _i18n.__)('Tweak your site, or give it a whole new look! Get creative — how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.')
        })]
      })
    }, {
      image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
        nonAnimatedSrc: "https://s.w.org/images/block-editor/set-the-design.svg?1",
        animatedSrc: "https://s.w.org/images/block-editor/set-the-design.gif?1"
      }),
      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "edit-site-welcome-guide__heading",
          children: (0, _i18n.__)('Set the design')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "edit-site-welcome-guide__text",
          children: (0, _i18n.__)('You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!')
        })]
      })
    }, {
      image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
        nonAnimatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.svg?1",
        animatedSrc: "https://s.w.org/images/block-editor/personalize-blocks.gif?1"
      }),
      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "edit-site-welcome-guide__heading",
          children: (0, _i18n.__)('Personalize blocks')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "edit-site-welcome-guide__text",
          children: (0, _i18n.__)('You can adjust your blocks to ensure a cohesive experience across your site — add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.')
        })]
      })
    }, {
      image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
        nonAnimatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.svg",
        animatedSrc: "https://s.w.org/images/block-editor/welcome-documentation.gif"
      }),
      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "edit-site-welcome-guide__heading",
          children: (0, _i18n.__)('Learn more')
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
          className: "edit-site-welcome-guide__text",
          children: [(0, _i18n.__)('New to block themes and styling your site?'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
            href: (0, _i18n.__)('https://wordpress.org/documentation/article/styles-overview/'),
            children: (0, _i18n.__)('Here’s a detailed guide to learn how to make the most of it.')
          })]
        })]
      })
    }]
  });
}
//# sourceMappingURL=styles.js.map