(function ($) {
    'use strict';

    const SifencyBeforeAfter = function ($scope, $) {

        const $wrapper   = $scope.find('.sifency-ba-wrapper');
        if (!$wrapper.length) return;

        const $inner     = $wrapper.find('.sifency-ba-inner');
        const $beforeImg = $wrapper.find('.sifency-ba-img-before');
        const $handle    = $wrapper.find('.sifency-ba-handle');

        function fixImageDimensions() {
            const fullWidth  = $inner.width();
            const fullHeight = $inner.height();

            $beforeImg.find('img').css({
                width: fullWidth + 'px',
                height: fullHeight + 'px',
                maxWidth: 'none'
            });
        }

        fixImageDimensions();

        let settings = {
            orientation: 'horizontal',
            offset: 50,
            interaction: 'drag'
        };

        try {
            const rawSettings = $wrapper.data('ba-settings');
            if (rawSettings) {
                $.extend(settings, rawSettings);
            }
        } catch (e) {
            console.log(e);
        }

        const isVertical = settings.orientation === 'vertical';

        function updatePosition(percentage) {
            percentage = Math.max(0, Math.min(100, percentage));
            const rect = $inner[0].getBoundingClientRect();

            if (isVertical) {
                const y = (percentage / 100) * rect.height;
                $beforeImg.css('height', percentage + '%');
                $handle.css('top', y + 'px');
            } else {
                const x = (percentage / 100) * rect.width;
                $beforeImg.css('width', percentage + '%');
                $handle.css('left', x + 'px');
            }
        }

        function calculatePercentage(e) {
            const rect = $inner[0].getBoundingClientRect();
            const clientX = e.clientX || (e.touches && e.touches[0].clientX);
            const clientY = e.clientY || (e.touches && e.touches[0].clientY);

            if (isVertical) {
                return ((clientY - rect.top) / rect.height) * 100;
            }
            return ((clientX - rect.left) / rect.width) * 100;
        }

        updatePosition(settings.offset);

        if (settings.interaction === 'hover') {

            $inner.on('mousemove', function (e) {
                updatePosition(calculatePercentage(e));
            });

        } else {

            let isDragging = false;

            $handle.on('mousedown', function () {
                isDragging = true;
                $wrapper.addClass('sifency-ba-dragging');
            });

            $(window).on('mouseup', function () {
                isDragging = false;
                $wrapper.removeClass('sifency-ba-dragging');
            });

            $inner.on('mousemove', function (e) {
                if (!isDragging) return;
                updatePosition(calculatePercentage(e));
            });

            $inner.on('touchstart', function () {
                isDragging = true;
            });

            $inner.on('touchend', function () {
                isDragging = false;
            });

            $inner.on('touchmove', function (e) {
                updatePosition(calculatePercentage(e));
            });

            $inner.on('click', function (e) {
                updatePosition(calculatePercentage(e));
            });
        }

        if (elementorFrontend.isEditMode()) {
            const resizeObserver = new ResizeObserver(() => {
                fixImageDimensions();
                updatePosition(settings.offset);
            });
            resizeObserver.observe($wrapper[0]);
        }
    };

    $(window).on('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction(
            'frontend/element_ready/sifency-before-after.default',
            SifencyBeforeAfter
        );
    });

})(jQuery);