<?php
/**
 * ZMND Moving Gallery Widget
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

require_once WS_PATH . 'elementor/zmnd/includes/ws-zmnd-widget-base.php';

/**
 * Moving Gallery Widget
 */
class WS_ZMND_Moving_Gallery_Widget extends WS_ZMND_Widget_Base {

    /**
     * Get widget name
     */
    public function get_name() {
        return 'ws_zmnd_moving_gallery';
    }

    /**
     * Get widget title
     */
    public function get_title() {
        return esc_html__('Moving Gallery', 'watson');
    }

    /**
     * Get widget icon
     */
    public function get_icon() {
        return 'eicon-gallery-masonry';
    }

    /**
     * Get widget keywords
     */
    public function get_keywords() {
        return ['gallery', 'masonry', 'moving', 'animation', 'zmnd', 'watson'];
    }

    /**
     * Register widget controls
     */
    protected function register_controls() {
        
        // Content Section
        $this->start_controls_section(
            'ws_section_gallery',
            [
                'label' => esc_html__('Gallery', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'ws_gallery',
            [
                'label' => esc_html__('Add Images', 'watson'),
                'type' => \Elementor\Controls_Manager::GALLERY,
                'default' => [],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Image_Size::get_type(),
            [
                'name' => 'ws_thumbnail',
                'default' => 'medium',
                'separator' => 'none',
            ]
        );

        $this->end_controls_section();

        // Animation Settings
        $this->start_controls_section(
            'ws_section_animation',
            [
                'label' => esc_html__('Animation', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'ws_direction',
            [
                'label' => esc_html__('Movement Direction', 'watson'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'up',
                'options' => [
                    'up' => esc_html__('Up', 'watson'),
                    'down' => esc_html__('Down', 'watson'),
                ],
                'prefix_class' => 'ws-zmnd-moving-gallery-direction-',
            ]
        );

        $this->add_control(
            'ws_speed',
            [
                'label' => esc_html__('Speed', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['s'],
                'range' => [
                    's' => [
                        'min' => 10,
                        'max' => 120,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 's',
                    'size' => 30,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-inner' => 'animation-duration: {{SIZE}}s;',
                ],
            ]
        );

        $this->add_control(
            'ws_pause_on_hover',
            [
                'label' => esc_html__('Pause on Hover', 'watson'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Pause - Yes', 'watson'),
                'label_off' => esc_html__('Pause - No', 'watson'),
                'return_value' => 'yes',
                'default' => 'yes',
                'prefix_class' => 'ws-zmnd-pause-',
                'description' => esc_html__('Enable this option to pause the animation when hovering over the gallery.', 'watson'),
            ]
        );
        
        $this->add_control(
            'ws_scale_animation',
            [
                'label' => esc_html__('Scale Animation', 'watson'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'watson'),
                'label_off' => esc_html__('No', 'watson'),
                'return_value' => 'yes',
                'default' => '',
                'prefix_class' => 'ws-zmnd-scale-',
                'description' => esc_html__('Highlight selected images by scaling them up while others remain smaller.', 'watson'),
            ]
        );
        
        $this->add_control(
            'ws_scale_pattern',
            [
                'label' => esc_html__('Scale Pattern', 'watson'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'third',
                'options' => [
                    'odd' => esc_html__('Odd Images', 'watson'),
                    'even' => esc_html__('Even Images', 'watson'),
                    'third' => esc_html__('Every Third Image', 'watson'),
                ],
                'prefix_class' => 'ws-zmnd-scale-pattern-',
                'condition' => [
                    'ws_scale_animation' => 'yes',
                ],
            ]
        );
        
        $this->add_control(
            'ws_scale_speed',
            [
                'label' => esc_html__('Scale Animation Speed', 'watson'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'normal',
                'options' => [
                    'slow' => esc_html__('Slow', 'watson'),
                    'normal' => esc_html__('Normal', 'watson'),
                    'fast' => esc_html__('Fast', 'watson'),
                ],
                'prefix_class' => 'ws-zmnd-scale-speed-',
                'condition' => [
                    'ws_scale_animation' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();

        // Layout Settings
        $this->start_controls_section(
            'ws_section_layout',
            [
                'label' => esc_html__('Layout', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_responsive_control(
            'ws_columns',
            [
                'label' => esc_html__('Columns', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 6,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 3,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-item' => 'width: calc(100% / {{SIZE}});',
                ],
            ]
        );

        $this->add_responsive_control(
            'ws_item_gap',
            [
                'label' => esc_html__('Item Gap', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                        'step' => 1,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 5,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 10,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-item' => 'padding: calc({{SIZE}}{{UNIT}} / 2);',
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-inner' => 'margin: calc(-{{SIZE}}{{UNIT}} / 2);',
                ],
            ]
        );

        $this->add_responsive_control(
            'ws_container_height',
            [
                'label' => esc_html__('Container Height', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => [
                        'min' => 100,
                        'max' => 1000,
                        'step' => 10,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 400,
                ],
                'selectors' => [
                    '{{WRAPPER}}:not(.ws-zmnd-image-fit-auto) .ws-zmnd-moving-gallery-container' => 'height: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'ws_image_fit!' => 'auto',
                ],
            ]
        );
        
        $this->add_control(
            'ws_image_fit',
            [
                'label' => esc_html__('Image Fit', 'watson'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'cover',
                'options' => [
                    'cover' => esc_html__('Cover (Crop)', 'watson'),
                    'contain' => esc_html__('Contain (Full Image)', 'watson'),
                    'auto' => esc_html__('Original Size', 'watson'),
                ],
                'prefix_class' => 'ws-zmnd-image-fit-',
                'description' => esc_html__('Choose how the images should fit into their container.', 'watson'),
            ]
        );
        
        $this->add_control(
            'ws_original_size_notice',
            [
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => esc_html__('When using Original Size mode, the container height will be automatic and animation will be disabled.', 'watson'),
                'content_classes' => 'elementor-descriptor',
                'condition' => [
                    'ws_image_fit' => 'auto',
                ],
            ]
        );

        $this->end_controls_section();

        // Style Section
        $this->start_controls_section(
            'ws_section_style',
            [
                'label' => esc_html__('Gallery', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'ws_image_border',
                'selector' => '{{WRAPPER}} .ws-zmnd-moving-gallery-image',
                'separator' => 'before',
            ]
        );

        $this->add_responsive_control(
            'ws_image_border_radius',
            [
                'label' => esc_html__('Gallery Border Radius', 'watson'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ws_image_box_shadow',
                'selector' => '{{WRAPPER}} .ws-zmnd-moving-gallery-image',
            ]
        );

        $this->end_controls_section();

        // Container Style
        $this->start_controls_section(
            'ws_section_container_style',
            [
                'label' => esc_html__('Container', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'ws_container_background',
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .ws-zmnd-moving-gallery-container',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'ws_container_border',
                'selector' => '{{WRAPPER}} .ws-zmnd-moving-gallery-container',
            ]
        );

        $this->add_responsive_control(
            'ws_container_border_radius',
            [
                'label' => esc_html__('Border Radius', 'watson'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-moving-gallery-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'ws_container_box_shadow',
                'selector' => '{{WRAPPER}} .ws-zmnd-moving-gallery-container',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output
     */
    protected function render() {
        $settings = $this->get_settings_for_display();
        
        if (empty($settings['ws_gallery'])) {
            return;
        }
        
        $direction = $settings['ws_direction'];
        
        $this->add_render_attribute('container', 'class', [
            'ws-zmnd-moving-gallery-container'
        ]);
        
        $this->add_render_attribute('inner', 'class', [
            'ws-zmnd-moving-gallery-inner',
            'ws-zmnd-moving-' . $direction
        ]);
        
        ?>
        <div <?php echo $this->get_render_attribute_string('container'); ?>>
            <div <?php echo $this->get_render_attribute_string('inner'); ?>>
                <?php foreach ($settings['ws_gallery'] as $image) : ?>
                    <div class="ws-zmnd-moving-gallery-item">
                        <div class="ws-zmnd-moving-gallery-image">
                            <?php
                            $image_url = \Elementor\Group_Control_Image_Size::get_attachment_image_src($image['id'], 'ws_thumbnail', $settings);
                            if (!$image_url && isset($image['url'])) {
                                $image_url = $image['url'];
                            }
                            ?>
                            <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr(\Elementor\Control_Media::get_image_alt($image)); ?>">
                        </div>
                    </div>
                <?php endforeach; ?>
                
                <?php if ($direction === 'up' || $direction === 'down') : ?>
                    <?php foreach ($settings['ws_gallery'] as $image) : ?>
                        <div class="ws-zmnd-moving-gallery-item">
                            <div class="ws-zmnd-moving-gallery-image">
                                <?php
                                $image_url = \Elementor\Group_Control_Image_Size::get_attachment_image_src($image['id'], 'ws_thumbnail', $settings);
                                if (!$image_url && isset($image['url'])) {
                                    $image_url = $image['url'];
                                }
                                ?>
                                <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr(\Elementor\Control_Media::get_image_alt($image)); ?>">
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
        <?php
    }
}
