/**
 * Tracking Block for Gutenberg with Popup Editor
 */
(function(blocks, element, blockEditor) {
    var el = element.createElement;
    var InnerBlocks = blockEditor.InnerBlocks;
    var useBlockProps = blockEditor.useBlockProps;
    var __ = wp.i18n.__;
    var Button = wp.components.Button;
    var Popover = wp.components.Popover;
    var TextControl = wp.components.TextControl;
    var useState = wp.element.useState;

    blocks.registerBlockType('simplified-tracking/track-element', {
        title: 'Tracking Wrapper',
        icon: 'chart-bar',
        category: 'design',
        attributes: {
            eventName: {
                type: 'string',
                default: 'tracked_element'
            }
        },
        
        edit: function(props) {
            var blockProps = useBlockProps();
            var eventName = props.attributes.eventName;
            var [isPopoverVisible, setPopoverVisible] = useState(false);
            
            function onChangeEventName(newEventName) {
                props.setAttributes({ eventName: newEventName });
            }

            return el(
                'div', 
                blockProps,
                el(
                    'div',
                    { className: 'tracking-block-wrapper' },
                    el(
                        'div',
                        { className: 'tracking-block-notice' },
                        'Event: ' + eventName,
                        el(
                            Button,
                            {
                                isSmall: true,
                                onClick: function() {
                                    setPopoverVisible(!isPopoverVisible);
                                },
                                style: {
                                    marginLeft: '8px',
                                    background: 'white',
                                    color: '#007cba'
                                }
                            },
                            'Edit'
                        ),
                        isPopoverVisible && el(
                            Popover,
                            {
                                onClose: function() {
                                    setPopoverVisible(false);
                                },
                                position: 'bottom',
                                focusOnMount: 'firstElement'
                            },
                            el(
                                'div',
                                {
                                    style: {
                                        padding: '16px',
                                        width: '300px'
                                    }
                                },
                                el(
                                    'h3',
                                    {
                                        style: {
                                            margin: '0 0 8px 0'
                                        }
                                    },
                                    'Tracking Event Settings'
                                ),
                                el(
                                    TextControl,
                                    {
                                        label: 'Event Name',
                                        value: eventName,
                                        onChange: onChangeEventName,
                                        help: 'Enter the event name to track when this element is clicked'
                                    }
                                ),
                                el(
                                    Button,
                                    {
                                        isPrimary: true,
                                        onClick: function() {
                                            setPopoverVisible(false);
                                        }
                                    },
                                    'Done'
                                )
                            )
                        )
                    ),
                    el(
                        'div',
                        { style: { marginTop: '5px' } },
                        el(InnerBlocks)
                    )
                )
            );
        },

        save: function(props) {
            var blockProps = useBlockProps.save({
                className: 'tracking-block-wrapper',
                onClick: "tE('" + props.attributes.eventName + "')"
            });

            return el(
                'div',
                blockProps,
                el(InnerBlocks.Content)
            );
        }
    });
}(
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor
));