"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getExamples = getExamples;
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _colorExamples = _interopRequireDefault(require("./color-examples"));
var _duotoneExamples = _interopRequireDefault(require("./duotone-examples"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Returns examples color examples for each origin
 * e.g. Core (Default), Theme, and User.
 *
 * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
 * @return {BlockExample[]} An array of color block examples.
 */function getColorExamples(colors) {
  if (!colors) {
    return [];
  }
  const examples = [];
  _constants.STYLE_BOOK_COLOR_GROUPS.forEach(group => {
    const palette = colors[group.type];
    const paletteFiltered = Array.isArray(palette) ? palette.find(origin => origin.slug === group.origin) : undefined;
    if (paletteFiltered?.[group.type]) {
      const example = {
        name: group.slug,
        title: group.title,
        category: 'colors'
      };
      if (group.type === 'duotones') {
        example.content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_duotoneExamples.default, {
          duotones: paletteFiltered[group.type]
        });
        examples.push(example);
      } else {
        example.content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorExamples.default, {
          colors: paletteFiltered[group.type],
          type: group.type
        });
        examples.push(example);
      }
    }
  });
  return examples;
}

/**
 * Returns examples for the overview page.
 *
 * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
 * @return {BlockExample[]} An array of block examples.
 */
function getOverviewBlockExamples(colors) {
  const examples = [];

  // Get theme palette from colors if they exist.
  const themePalette = Array.isArray(colors?.colors) ? colors.colors.find(origin => origin.slug === 'theme') : undefined;
  if (themePalette) {
    const themeColorexample = {
      name: 'theme-colors',
      title: (0, _i18n.__)('Colors'),
      category: 'overview',
      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorExamples.default, {
        colors: themePalette.colors,
        type: "colors",
        templateColumns: "repeat(auto-fill, minmax( 200px, 1fr ))",
        itemHeight: "32px"
      })
    };
    examples.push(themeColorexample);
  }

  // Get examples for typography blocks.
  const typographyBlockExamples = [];
  if ((0, _blocks.getBlockType)('core/heading')) {
    const headingBlock = (0, _blocks.createBlock)('core/heading', {
      // translators: Typography example. Your local alphabet, numbers and some common special characters.
      content: (0, _i18n.__)(`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(…)},.-<>?!*&:/A@HELFO™©`),
      level: 1
    });
    typographyBlockExamples.push(headingBlock);
  }
  if ((0, _blocks.getBlockType)('core/paragraph')) {
    const firstParagraphBlock = (0, _blocks.createBlock)('core/paragraph', {
      content: (0, _i18n.__)(`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`)
    });
    const secondParagraphBlock = (0, _blocks.createBlock)('core/paragraph', {
      content: (0, _i18n.__)(`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`)
    });
    if ((0, _blocks.getBlockType)('core/group')) {
      const groupBlock = (0, _blocks.createBlock)('core/group', {
        layout: {
          type: 'grid',
          columnCount: 2,
          minimumColumnWidth: '12rem'
        },
        style: {
          spacing: {
            blockGap: '1.5rem'
          }
        }
      }, [firstParagraphBlock, secondParagraphBlock]);
      typographyBlockExamples.push(groupBlock);
    } else {
      typographyBlockExamples.push(firstParagraphBlock);
    }
  }
  if (!!typographyBlockExamples.length) {
    examples.push({
      name: 'typography',
      title: (0, _i18n.__)('Typography'),
      category: 'overview',
      blocks: typographyBlockExamples
    });
  }
  const otherBlockExamples = ['core/image', 'core/separator', 'core/buttons', 'core/pullquote', 'core/search'];

  // Get examples for other blocks and put them in order of above array.
  otherBlockExamples.forEach(blockName => {
    const blockType = (0, _blocks.getBlockType)(blockName);
    if (blockType && blockType.example) {
      const blockExample = {
        name: blockName,
        title: blockType.title,
        category: 'overview',
        /*
         * CSS generated from style attributes will take precedence over global styles CSS,
         * so remove the style attribute from the example to ensure the example
         * demonstrates changes to global styles.
         */
        blocks: (0, _blocks.getBlockFromExample)(blockName, {
          ...blockType.example,
          attributes: {
            ...blockType.example.attributes,
            style: undefined
          }
        })
      };
      examples.push(blockExample);
    }
  });
  return examples;
}

/**
 * Returns a list of examples for registered block types.
 *
 * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
 * @return {BlockExample[]} An array of block examples.
 */
function getExamples(colors) {
  const nonHeadingBlockExamples = (0, _blocks.getBlockTypes)().filter(blockType => {
    const {
      name,
      example,
      supports
    } = blockType;
    return name !== 'core/heading' && !!example && supports?.inserter !== false;
  }).map(blockType => ({
    name: blockType.name,
    title: blockType.title,
    category: blockType.category,
    /*
     * CSS generated from style attributes will take precedence over global styles CSS,
     * so remove the style attribute from the example to ensure the example
     * demonstrates changes to global styles.
     */
    blocks: (0, _blocks.getBlockFromExample)(blockType.name, {
      ...blockType.example,
      attributes: {
        ...blockType.example.attributes,
        style: undefined
      }
    })
  }));
  const isHeadingBlockRegistered = !!(0, _blocks.getBlockType)('core/heading');
  if (!isHeadingBlockRegistered) {
    return nonHeadingBlockExamples;
  }

  // Use our own example for the Heading block so that we can show multiple
  // heading levels.
  const headingsExample = {
    name: 'core/heading',
    title: (0, _i18n.__)('Headings'),
    category: 'text',
    blocks: [1, 2, 3, 4, 5, 6].map(level => {
      return (0, _blocks.createBlock)('core/heading', {
        content: (0, _i18n.sprintf)(
        // translators: %d: heading level e.g: "1", "2", "3"
        (0, _i18n.__)('Heading %d'), level),
        level
      });
    })
  };
  const colorExamples = getColorExamples(colors);
  const overviewBlockExamples = getOverviewBlockExamples(colors);
  return [headingsExample, ...colorExamples, ...nonHeadingBlockExamples, ...overviewBlockExamples];
}
//# sourceMappingURL=examples.js.map