/**
 * Custom WordPress block boilerplate.
 *
 * @package    My_Block_Package
 * @author     Alexis J. Villegas
 * @link       http://www.alexisvillegas.com
 * @license    GPL-2.0+
 */

( function( blocks, editor, element ) {
    const __ = wp.i18n.__; // The __() for internationalization.
    const el = element.createElement; // The wp.element.createElement() function to create elements.
    const registerBlockType = blocks.registerBlockType; // The registerBlockType() to register blocks.
    const { InnerBlocks } = editor;
    const template = [
        [ 'core/heading', { content: 'Title' } ],
        [ 'core/paragraph', { content: 'Description...' } ]
    ]; // The block template to use with InnerBlocks, can add/remove/edit initial parameters.

    registerBlockType( 'my-block/cta-section', { // Block name; must be a string that contains a namespace prefix followed by a forward slash.
        title: __( 'My Block Title', 'my-text-domain' ),
        description: __( 'My custom block description.', 'my-text-domain' ),
        icon: 'smiley', // Can use Dashicons or custom SVG elements (https://developer.wordpress.org/resource/dashicons/)
        category: 'common', // Group blocks together based on common traits, can be 'common', 'formatting', 'layout', 'widgets' or 'embed'.
        supports: {
            align: true,
            align: [ 'wide', 'full' ]
        },
        keywords: [ 'Custom Block', 'CTA', 'Call to Action' ], // Keywords for custom block, limited to three.
        attributes: { // Placeholders to store custom block setting values.
            backgroundColor: {
                type: 'string',
                default: '#34b79d'
            }
        },
        example: { // Structured data used to construct a block preview shown in the Block Inspector panel when inserting blocks.
            attributes: {
                backgroundColor: '#34b79d'
            },
            innerBlocks: [
                {
                    name: 'core/heading',
                    attributes: {
                        content: __( 'Title', 'my-text-domain' )
                    }
                },
                {
                    name: 'core/paragraph',
                    attributes: {
                        content: __( 'Description...', 'my-text-domain' )
                    }
                }
            ]
        },

        edit: function( props ) {
            return [
                el( 'div',
                    {
                        key: 'block-section', // React requires each top-level item in the returned array to have a unique key.
                        className: props.className, // className property is automatically enabled for each block.
                        style: {
                            backgroundColor: props.attributes.backgroundColor
                        }
                    },
                    el( 'div',
                        {
                            className: 'block-wrap'
                        },
                        el( InnerBlocks,
                            {
                                template: template,
                                templateLock: false // Can use 'all', 'block' or false.
                            }
                        )
                    )
                )
            ];
        },

        save: function( props ) {
            return (
                el( 'div',
                    {
                        className: props.className, // className property is automatically enabled for each block.
                        style: {
                            backgroundColor: props.attributes.backgroundColor
                        }
                    },
                    el( 'div',
                        {
                            className: 'block-wrap'
                        },
                        el( InnerBlocks.Content )
                    )
                )
            );
        }
    });
}(
    window.wp.blocks,
    window.wp.blockEditor,
    window.wp.element
) );