(function (wp) {
    const { __ } = wp.i18n;
    const { addFilter } = wp.hooks;
    const { createHigherOrderComponent } = wp.compose;
    const { Fragment } = wp.element;
    const { BlockControls } = wp.blockEditor;
    const { ToolbarGroup, ToolbarButton, Dropdown, MenuGroup, MenuItem, RangeControl } = wp.components;
    const { createElement } = wp.element;

    // Ajouter les attributs d'animation à tous les blocs natifs
    function addOrphicAnimationAttributes(settings, name) {
        if (!name.startsWith('core/')) {
            return settings;
        }

        return lodash.merge({}, settings, {
            attributes: {
                hasAnimation: {
                    type: 'boolean',
                    default: false
                },
                animationType: {
                    type: 'string',
                },
                animationDistance: {
                    type: 'number',
                },
                animationDuration: {
                    type: 'number',
                },
                animationDelay: {
                    type: 'number',
                },
                triggerPoint: {
                    type: 'number',
                },
                scrollBehavior: {
                    type: 'string',
                }
            }
        });
    }

    const withOrphicAnimationControls = createHigherOrderComponent((BlockEdit) => {
        return (props) => {
            if (!props.name.startsWith('core/')) {
                return createElement(BlockEdit, props);
            }

            const { attributes, setAttributes } = props;
            const { 
                hasAnimation,
                animationType, 
                scrollBehavior,
                animationDistance,
                animationDuration,
                animationDelay,
                triggerPoint
            } = attributes;

            const animationTypes = [
                { label: __('Fade In', 'orphic-ui'), value: 'fadeIn' },
                { label: __('Fade In Top', 'orphic-ui'), value: 'fadeInTop' },
                { label: __('Fade In Bottom', 'orphic-ui'), value: 'fadeInBottom' },
                { label: __('Fade In Left', 'orphic-ui'), value: 'fadeInLeft' },
                { label: __('Fade In Right', 'orphic-ui'), value: 'fadeInRight' }
            ];

            const scrollBehaviors = [
                { label: __('Follow Scroll', 'orphic-ui'), value: 'followScroll' },
                { label: __('Play on View', 'orphic-ui'), value: 'playOnView' }
            ];

            // Vérifier si on doit afficher le contrôle de distance
            const showDistanceControl = animationType !== 'fadeIn';

            return createElement(
                Fragment,
                null,
                createElement(BlockEdit, props),
                createElement(
                    BlockControls,
                    null,
                    createElement(
                        ToolbarGroup,
                        null,
                        // Toggle Animation Button
                        createElement(
                            ToolbarButton,
                            {
                                icon: 'slides',
                                label: __('Toggle Animation', 'orphic-ui'),
                                isPressed: hasAnimation,
                                onClick: () => setAttributes({ hasAnimation: !hasAnimation, animationType: 'fadeIn', scrollBehavior: 'playOnView', animationDistance: 50, animationDuration: 300, animationDelay: 0, triggerPoint: 30 })
                            }
                        ),
                        hasAnimation && [
                            // Animation Type Dropdown
                            createElement(
                                Dropdown,
                                {
                                    className: 'orphic-animation-type',
                                    contentClassName: 'orphic-animation-popover',
                                    position: 'bottom right',
                                    renderToggle: ({ isOpen, onToggle }) => {
                                        const currentAnimation = animationTypes.find(type => type.value === animationType);
                                        return createElement(
                                            ToolbarButton,
                                            {
                                                icon: 'move',
                                                label: currentAnimation ? currentAnimation.label : __('Animation Type', 'orphic-ui'),
                                                onClick: onToggle,
                                                'aria-expanded': isOpen,
                                                children: currentAnimation ? currentAnimation.label : __('Animation Type', 'orphic-ui')
                                            }
                                        );
                                    },
                                    renderContent: () => createElement(
                                        MenuGroup,
                                        null,
                                        animationTypes.map((item) => createElement(
                                            MenuItem,
                                            {
                                                key: item.value,
                                                onClick: () => setAttributes({ animationType: item.value }),
                                                isSelected: animationType === item.value
                                            },
                                            item.label
                                        ))
                                    )
                                }
                            ),
                            // Scroll Behavior Dropdown
                            createElement(
                                Dropdown,
                                {
                                    className: 'orphic-scroll-behavior',
                                    position: 'bottom right',
                                    renderToggle: ({ isOpen, onToggle }) => {
                                        const currentBehavior = scrollBehaviors.find(type => type.value === scrollBehavior);
                                        return createElement(
                                            ToolbarButton,
                                            {
                                                icon: 'arrow-down',
                                                label: currentBehavior ? currentBehavior.label : __('Scroll Behavior', 'orphic-ui'),
                                                onClick: onToggle,
                                                'aria-expanded': isOpen,
                                                children: currentBehavior ? currentBehavior.label : __('Scroll Behavior', 'orphic-ui')
                                            }
                                        );
                                    },
                                    renderContent: () => createElement(
                                        MenuGroup,
                                        null,
                                        scrollBehaviors.map((item) => createElement(
                                            MenuItem,
                                            {
                                                key: item.value,
                                                onClick: () => setAttributes({ scrollBehavior: item.value }),
                                                isSelected: scrollBehavior === item.value
                                            },
                                            item.label
                                        ))
                                    )
                                }
                            ),
                            // Animation Settings Dropdown
                            createElement(
                                Dropdown,
                                {
                                    className: 'orphic-animation-settings',
                                    position: 'bottom right',
                                    renderToggle: ({ isOpen, onToggle }) => createElement(
                                        ToolbarButton,
                                        {
                                            icon: 'admin-settings',
                                            label: __('Animation Settings', 'orphic-ui'),
                                            onClick: onToggle,
                                            'aria-expanded': isOpen
                                        }
                                    ),
                                    renderContent: () => createElement(
                                        'div',
                                        {
                                            style: {
                                                padding: '16px',
                                                minWidth: '240px'
                                            }
                                        },
                                        showDistanceControl && createElement(
                                            RangeControl,
                                            {
                                                label: __('Distance (px)', 'orphic-ui'),
                                                value: animationDistance,
                                                onChange: (value) => setAttributes({ animationDistance: value }),
                                                min: 0,
                                                max: 200
                                            }
                                        ),
                                        createElement(
                                            RangeControl,
                                            {
                                                label: __('Duration (ms)', 'orphic-ui'),
                                                value: animationDuration,
                                                onChange: (value) => setAttributes({ animationDuration: value }),
                                                min: 0,
                                                max: 3000,
                                                step: 100
                                            }
                                        ),
                                        createElement(
                                            RangeControl,
                                            {
                                                label: __('Delay (ms)', 'orphic-ui'),
                                                value: animationDelay,
                                                onChange: (value) => setAttributes({ animationDelay: value }),
                                                min: 0,
                                                max: 2000,
                                                step: 100
                                            }
                                        ),
                                        createElement(
                                            RangeControl,
                                            {
                                                label: __('Trigger Point (%)', 'orphic-ui'),
                                                value: triggerPoint,
                                                onChange: (value) => setAttributes({ triggerPoint: value }),
                                                min: 0,
                                                max: 100
                                            }
                                        )
                                    )
                                }
                            )
                        ]
                    )
                )
            );
        };
    }, 'withOrphicAnimationControls');

    // Ajouter les data-attributes au rendu final
    function addOrphicAnimationProps(extraProps, blockType, attributes) {
        if (!blockType.name.startsWith('core/')) {
            return extraProps;
        }

        const {
            hasAnimation,
            animationType,
            animationDistance,
            animationDuration,
            animationDelay,
            triggerPoint,
            scrollBehavior
        } = attributes;

        if (hasAnimation && animationType) {
            extraProps['data-animation-type'] = animationType;
            extraProps['data-animation-distance'] = animationDistance;
            extraProps['data-animation-duration'] = animationDuration;
            extraProps['data-animation-delay'] = animationDelay;
            extraProps['data-animation-trigger'] = triggerPoint;
            extraProps['data-scroll-behavior'] = scrollBehavior;
            extraProps.className = extraProps.className
                ? `${extraProps.className} orphic-motion-animation`
                : 'orphic-motion-animation';
        }

        return extraProps;
    }

    // Appliquer les filtres
    addFilter(
        'blocks.registerBlockType',
        'orphic-ui/animation-attributes',
        addOrphicAnimationAttributes
    );

    addFilter(
        'editor.BlockEdit',
        'orphic-ui/animation-controls',
        withOrphicAnimationControls
    );

    addFilter(
        'blocks.getSaveContent.extraProps',
        'orphic-ui/animation-props',
        addOrphicAnimationProps
    );

})(window.wp); 