"use strict";

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

/**
 * Internal dependencies
 */

function WelcomeGuideEditor() {
  const {
    toggle
  } = (0, _data.useDispatch)(_preferences.store);
  const {
    isActive,
    isBlockBasedTheme
  } = (0, _data.useSelect)(select => {
    return {
      isActive: !!select(_preferences.store).get('core/edit-site', 'welcomeGuide'),
      isBlockBasedTheme: select(_coreData.store).getCurrentTheme()?.is_block_theme
    };
  }, []);
  if (!isActive || !isBlockBasedTheme) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Guide, {
    className: "edit-site-welcome-guide guide-editor",
    contentLabel: (0, _i18n.__)('Welcome to the site editor'),
    finishButtonText: (0, _i18n.__)('Get started'),
    onFinish: () => toggle('core/edit-site', 'welcomeGuide'),
    pages: [{
      image: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
        nonAnimatedSrc: "https://s.w.org/images/block-editor/edit-your-site.svg?1",
        animatedSrc: "https://s.w.org/images/block-editor/edit-your-site.gif?1"
      }),
      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
          className: "edit-site-welcome-guide__heading",
          children: (0, _i18n.__)('Edit your site')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "edit-site-welcome-guide__text",
          children: (0, _i18n.__)('Design everything on your site — from the header right down to the footer — using blocks.')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
          className: "edit-site-welcome-guide__text",
          children: (0, _element.createInterpolateElement)((0, _i18n.__)('Click <StylesIconImage /> to start designing your blocks, and choose your typography, layout, and colors.'), {
            StylesIconImage: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
              alt: (0, _i18n.__)('styles'),
              src: "data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-4.4 0-8 3.6-8 8v.1c0 4.1 3.2 7.5 7.2 7.9h.8c4.4 0 8-3.6 8-8s-3.6-8-8-8zm0 15V5c3.9 0 7 3.1 7 7s-3.1 7-7 7z' fill='%231E1E1E'/%3E%3C/svg%3E%0A"
            })
          })
        })]
      })
    }]
  });
}
//# sourceMappingURL=editor.js.map