/**
 * WordPress dependencies
 */
import { useDispatch, useSelect } from '@wordpress/data';
import { Guide } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';

/**
 * Internal dependencies
 */
import { store as editSiteStore } from '../../store';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default function WelcomeGuidePage() {
  const {
    toggle
  } = useDispatch(preferencesStore);
  const isVisible = useSelect(select => {
    const isPageActive = !!select(preferencesStore).get('core/edit-site', 'welcomeGuidePage');
    const isEditorActive = !!select(preferencesStore).get('core/edit-site', 'welcomeGuide');
    const {
      isPage
    } = select(editSiteStore);
    return isPageActive && !isEditorActive && isPage();
  }, []);
  if (!isVisible) {
    return null;
  }
  const heading = __('Editing a page');
  return /*#__PURE__*/_jsx(Guide, {
    className: "edit-site-welcome-guide guide-page",
    contentLabel: heading,
    finishButtonText: __('Continue'),
    onFinish: () => toggle('core/edit-site', 'welcomeGuidePage'),
    pages: [{
      image: /*#__PURE__*/_jsx("video", {
        className: "edit-site-welcome-guide__video",
        autoPlay: true,
        loop: true,
        muted: true,
        width: "312",
        height: "240",
        children: /*#__PURE__*/_jsx("source", {
          src: "https://s.w.org/images/block-editor/editing-your-page.mp4",
          type: "video/mp4"
        })
      }),
      content: /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx("h1", {
          className: "edit-site-welcome-guide__heading",
          children: heading
        }), /*#__PURE__*/_jsx("p", {
          className: "edit-site-welcome-guide__text",
          children: __('It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.')
        })]
      })
    }]
  });
}
//# sourceMappingURL=page.js.map