<?php
/**
 * ZMND Animation Image Widget
 */

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

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

/**
 * Animation Image Widget
 */
class WS_ZMND_Animation_Image_Widget extends WS_ZMND_Widget_Base {

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

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

    /**
     * Get widget keywords
     */
    public function get_keywords() {
        return ['image', 'animation', 'pulse', 'scale', 'rotate', 'zmnd', 'watson'];
    }

    /**
     * Get style depends
     */
    public function get_style_depends() {
        return ['ws-zmnd-widgets', 'ws-zmnd-animation-image'];
    }

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

        $this->add_control(
            'ws_image',
            [
                'label' => esc_html__('Choose Image', 'watson'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

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

        $this->add_responsive_control(
            'ws_image_align',
            [
                'label' => esc_html__('Alignment', 'watson'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'watson'),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'watson'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'watson'),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image-wrapper' => 'text-align: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

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

        $this->add_control(
            'ws_animation_type',
            [
                'label' => esc_html__('Animation Type', 'watson'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'pulse',
                'options' => [
                    'pulse' => esc_html__('Pulse', 'watson'),
                    'bounce' => esc_html__('Bounce', 'watson'),
                    'shake' => esc_html__('Shake', 'watson'),
                    'swing' => esc_html__('Swing', 'watson'),
                    'tada' => esc_html__('Tada', 'watson'),
                    'wobble' => esc_html__('Wobble', 'watson'),
                    'jello' => esc_html__('Jello', 'watson'),
                    'heartbeat' => esc_html__('Heartbeat', 'watson'),
                    'none' => esc_html__('None', 'watson'),
                ],
            ]
        );

        $this->add_control(
            'ws_animation_duration',
            [
                'label' => esc_html__('Animation Duration', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['s'],
                'range' => [
                    's' => [
                        'min' => 0.1,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 's',
                    'size' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image.animated' => 'animation-duration: {{SIZE}}s;',
                ],
                'condition' => [
                    'ws_animation_type!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'ws_animation_delay',
            [
                'label' => esc_html__('Animation Delay', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['s'],
                'range' => [
                    's' => [
                        'min' => 0,
                        'max' => 10,
                        'step' => 0.1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image.animated' => 'animation-delay: {{SIZE}}s;',
                ],
                'condition' => [
                    'ws_animation_type!' => 'none',
                ],
            ]
        );

        $this->add_control(
            'ws_animation_infinite',
            [
                'label' => esc_html__('Infinite Animation', 'watson'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__('Yes', 'watson'),
                'label_off' => esc_html__('No', 'watson'),
                'return_value' => 'yes',
                'default' => 'yes',
                'condition' => [
                    'ws_animation_type!' => 'none',
                ],
            ]
        );

        $this->end_controls_section();

        // Transform Section
        $this->start_controls_section(
            'ws_transform_section',
            [
                'label' => esc_html__('Transform', 'watson'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_responsive_control(
            'ws_transform_scale',
            [
                'label' => esc_html__('Scale', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 0.1,
                        'max' => 2,
                        'step' => 0.1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 1,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image img' => 'transform: scale({{SIZE}}) rotate({{ws_transform_rotate.SIZE}}deg);',
                ],
            ]
        );

        $this->add_responsive_control(
            'ws_transform_rotate',
            [
                'label' => esc_html__('Rotate (deg)', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => -360,
                        'max' => 360,
                        'step' => 1,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 0,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image img' => 'transform: scale({{ws_transform_scale.SIZE}}) rotate({{SIZE}}deg);',
                ],
            ]
        );

        $this->end_controls_section();

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

        $this->add_responsive_control(
            'ws_image_max_width',
            [
                'label' => esc_html__('Max Width', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vw' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image img' => 'max-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'ws_image_width',
            [
                'label' => esc_html__('Width', 'watson'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 1,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                    'vw' => [
                        'min' => 0,
                        'max' => 100,
                        'step' => 1,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ws-zmnd-animation-image img' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

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

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

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

        $this->end_controls_section();
    }

    /**
     * Render widget output
     */
    protected function render() {
        $settings = $this->get_settings_for_display();

        if (empty($settings['ws_image']['url'])) {
            return;
        }

        $this->add_render_attribute('wrapper', 'class', 'ws-zmnd-animation-image-wrapper');
        $this->add_render_attribute('image', 'class', 'ws-zmnd-animation-image');

        if ($settings['ws_animation_type'] !== 'none') {
            $this->add_render_attribute('image', 'class', 'animated');
            $this->add_render_attribute('image', 'class', $settings['ws_animation_type']);
            if ($settings['ws_animation_infinite'] === 'yes') {
                $this->add_render_attribute('image', 'class', 'infinite');
            }
        }

        $image_html = \Elementor\Group_Control_Image_Size::get_attachment_image_html($settings, 'ws_image_size', 'ws_image');
        ?>
        <div <?php echo $this->get_render_attribute_string('wrapper'); ?>>
            <div <?php echo $this->get_render_attribute_string('image'); ?>>
                <?php echo $image_html; ?>
            </div>
        </div>
        <?php
    }
}
