"use strict";

const { registerBlockType: customRegisterBlockTypeRemote } = wp.blocks;
const el = wp.element.createElement;

customRegisterBlockTypeRemote(
    'aiomatic-automatic-ai-content-writer/aimogen-user-remote-chatbot',
    {
        title: 'Aimogen User Remote Chatbot',
        icon: 'format-chat',
        category: 'embed',
        apiVersion: 3,
        keywords: ['aimogen', 'chatbot', 'remote', 'aiomatic'],

        attributes: {
            max_instances: {
                type: 'string',
                default: '3',
            },
            required_user_capability: {
                type: 'string',
                default: '',
            },
            allow_delete: {
                type: 'string',
                default: 'yes',
            },
            allow_regenerate: {
                type: 'string',
                default: 'yes',
            },
            show_embed: {
                type: 'string',
                default: 'yes',
            },
            allow_domains: {
                type: 'string',
                default: 'no',
            },
        },

        edit: function (props) {

            const {
                max_instances,
                required_user_capability,
                allow_delete,
                allow_regenerate,
                show_embed,
                allow_domains,
            } = props.attributes;

            function updateMax(e) {
                props.setAttributes({ max_instances: e.target.value });
            }

            function updateCapability(e) {
                props.setAttributes({ required_user_capability: e.target.value });
            }

            function updateDelete(e) {
                props.setAttributes({ allow_delete: e.target.value });
            }

            function updateRegenerate(e) {
                props.setAttributes({ allow_regenerate: e.target.value });
            }

            function updateEmbed(e) {
                props.setAttributes({ show_embed: e.target.value });
            }

            function updateDomains(e) {
                props.setAttributes({ allow_domains: e.target.value });
            }

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

                el(
                    'h4',
                    { className: 'coderevolution_gutenberg_title' },
                    'Aimogen User Remote Chatbot',
                    el(
                        'div',
                        {
                            className:
                                'bws_help_box bws_help_box_right dashicons dashicons-editor-help',
                        },
                        el(
                            'div',
                            { className: 'bws_hidden_help_text' },
                            'Create and manage remote chatbot instances for logged-in users.'
                        )
                    )
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Maximum Chatbot Instances: '
                ),
                el(
                    'input',
                    {
                        type: 'number',
                        min: 1,
                        value: max_instances,
                        onChange: updateMax,
                        className: 'coderevolution_gutenberg_input',
                    }
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Required User Capability: '
                ),
                el(
                    'input',
                    {
                        type: 'text',
                        placeholder: 'example: manage_options',
                        value: required_user_capability,
                        onChange: updateCapability,
                        className: 'coderevolution_gutenberg_input',
                    }
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Allow Delete: '
                ),
                el(
                    'select',
                    {
                        value: allow_delete,
                        onChange: updateDelete,
                        className: 'coderevolution_gutenberg_select',
                    },
                    el('option', { value: 'yes' }, 'yes'),
                    el('option', { value: 'no' }, 'no')
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Allow Regenerate: '
                ),
                el(
                    'select',
                    {
                        value: allow_regenerate,
                        onChange: updateRegenerate,
                        className: 'coderevolution_gutenberg_select',
                    },
                    el('option', { value: 'yes' }, 'yes'),
                    el('option', { value: 'no' }, 'no')
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Show Embed Code: '
                ),
                el(
                    'select',
                    {
                        value: show_embed,
                        onChange: updateEmbed,
                        className: 'coderevolution_gutenberg_select',
                    },
                    el('option', { value: 'yes' }, 'yes'),
                    el('option', { value: 'no' }, 'no')
                ),

                el('br'),

                el(
                    'label',
                    { className: 'coderevolution_gutenberg_label' },
                    'Allow Domains Restriction: '
                ),
                el(
                    'select',
                    {
                        value: allow_domains,
                        onChange: updateDomains,
                        className: 'coderevolution_gutenberg_select',
                    },
                    el('option', { value: 'yes' }, 'yes'),
                    el('option', { value: 'no' }, 'no')
                )
            );
        },

        save: function () {
            return null;
        },
    }
);