( function( blocks, element, editor, components, apiFetch ) {
    var el = element.createElement;
    var registerBlockType = blocks.registerBlockType;
    var useBlockProps = editor.useBlockProps;
    var BlockControls = editor.BlockControls;
    var TextControl = components.TextControl;
    var Button = components.Button;
    var Spinner = components.Spinner;
    var ToolbarGroup = components.ToolbarGroup;
    var ToolbarButton = components.ToolbarButton;
    var useState = element.useState;

    registerBlockType( 'ansico/embed-url', {
        title: 'Ansico Embed URL',
        icon: 'admin-links',
        category: 'embed',
        attributes: {
            url: { type: 'string' },
            title: { type: 'string' },
            imageUrl: { type: 'string' },
            domain: { type: 'string' },
            isEditing: { type: 'boolean', default: true }
        },

        edit: function( props ) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;
            var isFetching = useState( false );
            var setIsFetching = isFetching[1];
            var blockProps = useBlockProps();

            function fetchUrlData() {
                if ( ! attributes.url ) return;
                setIsFetching( true );
                apiFetch( {
                    path: '/ansico/v1/fetch-url',
                    method: 'POST',
                    data: { url: attributes.url }
                } ).then( function( response ) {
                    setAttributes( {
                        title: response.title,
                        imageUrl: response.image,
                        domain: response.domain,
                        isEditing: false
                    } );
                    setIsFetching( false );
                } ).catch( function( error ) {
                    alert( 'Error fetching data.' );
                    setIsFetching( false );
                } );
            }

            if ( attributes.isEditing ) {
                return el( 'div', blockProps,
                    el( 'div', { className: 'ansico-embed-input-container' },
                        el( TextControl, {
                            label: 'Enter article URL',
                            value: attributes.url,
                            onChange: function( val ) { setAttributes( { url: val } ); },
                            placeholder: 'https://...'
                        } ),
                        el( Button, {
                            isPrimary: true,
                            onClick: fetchUrlData,
                            disabled: isFetching[0] || ! attributes.url
                        }, isFetching[0] ? el( Spinner ) : 'Generate Embed' )
                    )
                );
            }

            return el( 'div', blockProps,
                el( BlockControls, {},
                    el( ToolbarGroup, {},
                        el( ToolbarButton, {
                            icon: 'edit',
                            label: 'Edit URL',
                            onClick: function() { setAttributes( { isEditing: true } ); }
                        } )
                    )
                ),
                el( 'div', { className: 'ansico-embed-preview' },
                    attributes.imageUrl && el( 'img', { src: attributes.imageUrl, className: 'ansico-embed-image' } ),
                    el( 'div', { className: 'ansico-embed-content' },
                        el( 'p', { className: 'ansico-embed-domain' }, attributes.domain ),
                        el( 'h3', { className: 'ansico-embed-title' }, attributes.title )
                    )
                )
            );
        },

        save: function( props ) {
            var attributes = props.attributes;
            var blockProps = useBlockProps.save();

            if ( ! attributes.url || attributes.isEditing ) return null;

            return el( 'div', blockProps,
                el( 'a', { href: attributes.url, className: 'ansico-embed-link', target: '_blank', rel: 'noopener noreferrer' },
                    el( 'div', { className: 'ansico-embed-preview' },
                        attributes.imageUrl && el( 'img', { src: attributes.imageUrl, className: 'ansico-embed-image' } ),
                        el( 'div', { className: 'ansico-embed-content' },
                            el( 'p', { className: 'ansico-embed-domain' }, attributes.domain ),
                            el( 'h3', { className: 'ansico-embed-title' }, attributes.title )
                        )
                    )
                )
            );
        }
    } );
} )(
    window.wp.blocks,
    window.wp.element,
    window.wp.blockEditor,
    window.wp.components,
    window.wp.apiFetch
);