/**
 * Palantics Tracking Block
 */

const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, TextControl } = wp.components;
const { Fragment } = wp.element;
const { __ } = wp.i18n;

// Register the block
registerBlockType('palantics-tracking/track-element', {
    title: __('Tracking Element', 'palantics-tracking-plugin'),
    icon: 'chart-line',
    category: 'widgets',
    keywords: [
        __('track', 'palantics-tracking-plugin'),
        __('analytics', 'palantics-tracking-plugin'),
        __('palantics', 'palantics-tracking-plugin'),
    ],
    
    attributes: {
        eventName: {
            type: 'string',
            default: 'tracked_element',
        },
        content: {
            type: 'string',
            default: '',
        },
    },
    
    edit: function(props) {
        const { attributes, setAttributes } = props;
        const { eventName, content } = attributes;
        
        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody title={__('Tracking Settings', 'palantics-tracking-plugin')}>
                        <TextControl
                            label={__('Event Name', 'palantics-tracking-plugin')}
                            value={eventName}
                            onChange={(value) => setAttributes({ eventName: value })}
                            help={__('Enter the event name that will be used for tracking this element', 'palantics-tracking-plugin')}
                        />
                    </PanelBody>
                </InspectorControls>
                
                <div 
                    className="palantics-tracking-block"
                    style={{ 
                        padding: '20px', 
                        border: '1px dashed #ccc',
                        backgroundColor: '#f8f8f8' 
                    }}
                >
                    <div style={{ marginBottom: '10px', fontWeight: 'bold' }}>
                        {__('Palantics Tracking Element', 'palantics-tracking-plugin')}
                    </div>
                    <div style={{ fontSize: '0.9em', marginBottom: '10px' }}>
                        {__('Event:', 'palantics-tracking-plugin')} <code>{eventName}</code>
                    </div>
                    <div style={{ fontStyle: 'italic', fontSize: '0.8em' }}>
                        {__('This element will be tracked when clicked', 'palantics-tracking-plugin')}
                    </div>
                </div>
            </Fragment>
        );
    },
    
    save: function(props) {
        const { attributes } = props;
        const { eventName } = attributes;
        
        return (
            <div 
                className="palantics-tracking-wrapper"
                onClick={`tE('${eventName}')`}
            >
                <div className="palantics-tracking-content">
                    {props.children}
                </div>
            </div>
        );
    },
});