"use strict";

const { registerBlockType: customRegisterBlockTypeExpress } = wp.blocks;
const elena = wp.element.createElement;

customRegisterBlockTypeExpress(
    'aiomatic-automatic-ai-content-writer/aiomatic-post-creator',
    {
        title: 'Aimogen Post Creator',
        icon: 'edit',
        category: 'embed',
        apiVersion: 3,
        keywords: ['aiomatic', 'post', 'creator', 'ai'],

        attributes: {
            hide_details: {
                type: 'string',
                default: 'no'
            }
        },

        edit: function (props) {

            var hide_details = props.attributes.hide_details;

            function updateHideDetails(event){
                props.setAttributes({ hide_details: event.target.value });
            }

            return elena(
                'div',
                (wp.blockEditor?.useBlockProps || wp.editor?.useBlockProps)
                    ? (wp.blockEditor?.useBlockProps || wp.editor?.useBlockProps)({
                          className: 'coderevolution_gutenberg_div',
                      })
                    : { className: 'coderevolution_gutenberg_div' },

                elena(
                    'h4',
                    { className: 'coderevolution_gutenberg_title' },
                    'Aimogen Express Post Creator',
                    elena(
                        'div',
                        {
                            className:
                                'bws_help_box bws_help_box_right dashicons dashicons-editor-help',
                        },
                        elena(
                            'div',
                            { className: 'bws_hidden_help_text' },
                            'Displays the frontend AI post creator interface.'
                        )
                    )
                ),

                elena('br'),
                elena(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Hide advanced settings: '
                ),

                elena(
                    'select',
                    {
                        value: hide_details,
                        onChange: updateHideDetails,
                        className: 'coderevolution_gutenberg_select'
                    },
                    elena('option', { value: 'no' }, 'no'),
                    elena('option', { value: 'yes' }, 'yes')
                ),

                elena('br'),
                elena(
                    'p',
                    { className: 'coderevolution_gutenberg_description' },
                    'This block renders the Aimogen frontend post creator.'
                )
            );
        },

        save: function (props) {

            var hide_details = props.attributes.hide_details || 'no';

            return elena(
                'div',
                {
                    'data-hide-details': hide_details
                }
            );
        }
    }
);