<?php

namespace Unlockafe_addons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;

class Image_Hotspot extends Widget_Base
{
    public function get_name()
    {
        return 'unlockafe-image-hotspot';
    }

    public function get_title()
    {
        return esc_html__('Image Hotspot', 'unlock-addons-for-elementor');
    }

    public function get_icon()
    {
        return 'eicon-image-hotspot ulicon';
    }

    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    public function get_style_depends()
    {
        return ['unlockafe-image-hotspot'];
    }

    public function get_script_depends()
    {
        return ['unlockafe-image-hotspot'];
    }

    protected function register_controls()
    {
        // Image Section
        $this->start_controls_section(
            'section_image',
            [
                'label' => esc_html__('Image', 'unlock-addons-for-elementor'),
            ]
        );

        $this->add_control(
            'image',
            [
                'label' => esc_html__('Choose Image', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

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

        $this->end_controls_section();

        // Hotspots Section
        $this->start_controls_section(
            'section_hotspots',
            [
                'label' => esc_html__('Hotspots', 'unlock-addons-for-elementor'),
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'hotspot_icon',
            [
                'label' => esc_html__('Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-plus',
                    'library' => 'fa-solid',
                ],
            ]
        );

        $repeater->add_control(
            'hotspot_title',
            [
                'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Hotspot Title', 'unlock-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'hotspot_content',
            [
                'label' => esc_html__('Content', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => esc_html__('Hotspot Content', 'unlock-addons-for-elementor'),
            ]
        );

        $repeater->add_control(
            'hotspot_x_position',
            [
                'label' => esc_html__('X Position', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
            ]
        );

        $repeater->add_control(
            'hotspot_y_position',
            [
                'label' => esc_html__('Y Position', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['%'],
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
            ]
        );

        $repeater->add_control(
            'hotspot_bg_color',
            [
                'label' => esc_html__('Icon Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#4054b2',
            ]
        );

        $repeater->add_control(
            'hotspot_icon_color',
            [
                'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
            ]
        );

        $repeater->add_control(
            'hotspot_bg_hover_color',
            [
                'label' => esc_html__('Icon Hover Background', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'default' => '#2f3b89',
            ]
        );

        $repeater->add_control(
            'hotspot_position',
            [
                'label' => esc_html__('Tooltip Position', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'top' => esc_html__('Top', 'unlock-addons-for-elementor'),
                    'right' => esc_html__('Right', 'unlock-addons-for-elementor'),
                    'bottom' => esc_html__('Bottom', 'unlock-addons-for-elementor'),
                    'left' => esc_html__('Left', 'unlock-addons-for-elementor'),
                ],
                'default' => 'top',
            ]
        );

        $this->add_control(
            'hotspots_list',
            [
                'label' => esc_html__('Hotspots', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'hotspot_title' => esc_html__('Hotspot #1', 'unlock-addons-for-elementor'),
                        'hotspot_content' => esc_html__('Click to see more info!', 'unlock-addons-for-elementor'),
                    ],
                ],
                'title_field' => '{{{ hotspot_title }}}',
            ]
        );

        $this->add_control(
            'enable_zoom_pan',
            [
                'label' => esc_html__('Enable Image Zoom/Pan', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'default' => '',
            ]
        );

        $this->end_controls_section();

        // Style Tab - Image
        $this->start_controls_section(
            'section_style_image',
            [
                'label' => esc_html__('Image', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__('Width', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'vw'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                    'vw' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-image-hotspot-container' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_height',
            [
                'label' => esc_html__('Height', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                    ],
                    'vh' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-image-hotspot-container img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover;',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'image_border',
                'selector' => '{{WRAPPER}} .unlockafe-image-hotspot-container img',
            ]
        );

        $this->add_responsive_control(
            'image_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-image-hotspot-container img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Style Tab - Hotspot
        $this->start_controls_section(
            'section_style_hotspot',
            [
                'label' => esc_html__('Hotspot', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'hotspot_color',
            [
                'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .unlockafe-hotspot-icon svg' => 'fill: {{VALUE}};',
                ],
                'default' => '#ffffff',
            ]
        );

        $this->add_control(
            'hotspot_background_color',
            [
                'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-icon' => 'background-color: {{VALUE}};',
                ],
                'default' => '#4054b2',
            ]
        );

        $this->add_responsive_control(
            'hotspot_size',
            [
                'label' => esc_html__('Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-hotspot-icon' => 'font-size: calc({{SIZE}}{{UNIT}} / 2);',
                ],
                'default' => [
                    'size' => 30,
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'hotspot_border',
                'selector' => '{{WRAPPER}} .unlockafe-hotspot-icon',
            ]
        );

        $this->add_responsive_control(
            'hotspot_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
                'default' => [
                    'top' => '50',
                    'right' => '50',
                    'bottom' => '50',
                    'left' => '50',
                    'unit' => '%',
                    'isLinked' => true,
                ],
            ]
        );

        $this->end_controls_section();

        // Style Tab - Tooltip
        $this->start_controls_section(
            'section_style_tooltip',
            [
                'label' => esc_html__('Tooltip', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'tooltip_background_color',
            [
                'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip' => 'background-color: {{VALUE}};',
                ],
                'default' => '#ffffff',
            ]
        );

        $this->add_responsive_control(
            'tooltip_padding',
            [
                'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'tooltip_border',
                'selector' => '{{WRAPPER}} .unlockafe-hotspot-tooltip',
            ]
        );

        $this->add_responsive_control(
            'tooltip_border_radius',
            [
                'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'tooltip_box_shadow',
                'selector' => '{{WRAPPER}} .unlockafe-hotspot-tooltip',
            ]
        );

        $this->add_control(
            'tooltip_title_heading',
            [
                'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'tooltip_title_color',
            [
                'label' => esc_html__('Title Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip h4' => 'color: {{VALUE}} !important;',
                ],
                'default' => '#333333',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'tooltip_title_typography',
                'selector' => '{{WRAPPER}} .unlockafe-hotspot-tooltip h4',
            ]
        );

        $this->add_responsive_control(
            'tooltip_title_margin',
            [
                'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip h4' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'tooltip_description_heading',
            [
                'label' => esc_html__('Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'tooltip_description_color',
            [
                'label' => esc_html__('Description Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip p' => 'color: {{VALUE}} !important;',
                ],
                'default' => '#666666',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'tooltip_description_typography',
                'selector' => '{{WRAPPER}} .unlockafe-hotspot-tooltip p',
            ]
        );

        $this->add_responsive_control(
            'tooltip_description_margin',
            [
                'label' => esc_html__('Margin', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-hotspot-tooltip p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        ?>
        <div class="unlockafe-image-hotspot-wrapper">
            <div class="unlockafe-image-hotspot-container"<?php if (!empty($settings['enable_zoom_pan'])) echo ' data-enable-zoom-pan="1"'; ?>>
                <?php if (!empty($settings['image']['url'])) : ?>
                    <img src="<?php echo esc_url($settings['image']['url']); ?>" alt="Hotspot Image">

                    <?php if (!empty($settings['hotspots_list'])) : ?>
                        <?php foreach ($settings['hotspots_list'] as $index => $hotspot) : ?>
                            <div class="unlockafe-hotspot"
                                style="left: <?php echo esc_attr($hotspot['hotspot_x_position']['size']); ?>%; 
                                    top: <?php echo esc_attr($hotspot['hotspot_y_position']['size']); ?>%;"
                                data-tooltip="hotspot-<?php echo esc_attr($index); ?>">
                                <span class="unlockafe-hotspot-icon"
                                    data-bg="<?php echo esc_attr($hotspot['hotspot_bg_color']); ?>"
                                    data-icon="<?php echo esc_attr($hotspot['hotspot_icon_color']); ?>"
                                    data-hover="<?php echo esc_attr($hotspot['hotspot_bg_hover_color']); ?>">
                                    <?php Icons_Manager::render_icon($hotspot['hotspot_icon'], ['aria-hidden' => 'true']); ?>
                                </span>
                                <div class="unlockafe-hotspot-tooltip" data-pos="<?php echo esc_attr($hotspot['hotspot_position']); ?>" id="hotspot-<?php echo esc_attr($index); ?>">
                                    <?php if (!empty($hotspot['hotspot_title'])) : ?>
                                        <h4><?php echo esc_html($hotspot['hotspot_title']); ?></h4>
                                    <?php endif; ?>
                                    <?php if (!empty($hotspot['hotspot_content'])) : ?>
                                        <p><?php echo nl2br(wp_kses_post($hotspot['hotspot_content'])); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>

                <?php endif; ?>
            </div>
        </div>
        <?php
    }
}
