<?php

use Elementor\Controls_Manager;
use Elementor\Group_Control_Image_Size;

use Elementor\Group_Control_Typography;

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


class Bikys_Image_hotspot extends Elementor\Widget_Base {

    public function get_name() {
        return 'bikys-image-hotspot';
    }

    public function get_title() {
        return esc_html__('Bikys Image Hotspot', 'bikys');
    }

    public function get_categories() {
        return array('bikys-addons');
    }

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

    public function get_script_depends() {
        return ['bikys-elementor-image-location'];
    }

    protected function register_controls() {

        $this->start_controls_section('image_hotspot_image_section',
            [
                'label' => esc_html__('Image', 'bikys'),
            ]
        );

        $this->add_control('image_hotspot_image',
            [
                'label'       => esc_html__('Choose Image', 'bikys'),
                'type'        => Controls_Manager::MEDIA,
                'default'     => [
                    'url' => Elementor\Utils::get_placeholder_image_src(),
                ],
                'label_block' => true
            ]
        );
        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name'    => 'background_image', // Actually its `image_size`.
                'default' => 'full'
            ]
        );
        $this->end_controls_section();
        $this->start_controls_section('image_hotspot_icons_settings',
            [
                'label' => esc_html__('Hotspots', 'bikys'),
            ]
        );
        $repeater = new Elementor\Repeater();

        $repeater->add_responsive_control('bikys_image_hotspot_main_horizontal_position',
            [
                'label'      => esc_html__('Horizontal Position', 'bikys'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 20,
                    ],
                ],
                'default'    => [
                    'size' => 50,
                    'unit' => '%'
                ],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.hotspot_dot' => 'left: {{SIZE}}{{UNIT}}'
                ]
            ]
        );

        $repeater->add_responsive_control('bikys_image_hotspot_main_vertical_position',
            [
                'label'      => esc_html__('Vertical Position', 'bikys'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em', '%'],
                'range'      => [
                    'px' => [
                        'min' => 0,
                        'max' => 200,
                    ],
                    'em' => [
                        'min' => 0,
                        'max' => 20,
                    ],
                ],
                'default'    => [
                    'size' => 50,
                    'unit' => '%'
                ],
                'selectors'  => [
                    '{{WRAPPER}} {{CURRENT_ITEM}}.hotspot_dot' => 'top: {{SIZE}}{{UNIT}}'
                ]
            ]
        );
        $repeater->add_control('hotspots_image',
            [
                'label'       => esc_html__('Image', 'bikys'),
                'type'        => Controls_Manager::MEDIA,
                'default'     => [
                    'url' => Elementor\Utils::get_placeholder_image_src(),
                ],
                'label_block' => false
            ]);

        $repeater->add_control('image_hotspot_text',
            [
                'label'       => esc_html__('Label', 'bikys'),
                'type'        => Controls_Manager::TEXT,
                'default'     => 'Lorem ipsum',
                'label_block' => true,
            ]);

        $repeater->add_control(
            'link',
            [
                'label'       => esc_html__('Link to', 'bikys'),
                'type'        => Controls_Manager::URL,
                'dynamic'     => [
                    'active' => true,
                ],
                'placeholder' => esc_html__('https://your-link.com', 'bikys'),
            ]
        );

        $this->add_control('image_hotspot_icons',
            [
                'label'  => esc_html__('hotspot', 'bikys'),
                'type'   => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
            ]
        );
        $this->add_group_control(
            Group_Control_Image_Size::get_type(),
            [
                'name'    => 'image',
                'default' => 'full'
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_wrapper',
            [
                'label' => esc_html__('Wrapper', 'bikys'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'wrapper_background_color',
            [
                'label' => esc_html__('Background Color', 'bikys'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .image-hotspot-wrapper' => 'background-color: {{VALUE}};',

                ],
            ]
        );

        $this->add_responsive_control(
            'wrapper_padding',
            [
                'label'      => esc_html__('Padding', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .image-hotspot-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'wrapper_margin',
            [
                'label'      => esc_html__('Margin', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .image-hotspot-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );
        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_image',
            [
                'label' => esc_html__('Image', 'bikys'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'image-height',
            [
                'label' => esc_html__('Height', 'bikys'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 100,
                        'max' => 1000,
                    ],
                    'vh' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'size_units' => ['px', 'vh'],
                'selectors' => [
                    '{{WRAPPER}} .main-image-hotspot' => 'height: {{SIZE}}{{UNIT}}',
                ],
            ]
        );


        $this->add_responsive_control(
            'image_padding',
            [
                'label'      => esc_html__('Padding', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .main-image-hotspot' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_margin',
            [
                'label'      => esc_html__('Margin', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .main-image-hotspot' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );


        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_content',
            [
                'label' => esc_html__('content', 'bikys'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'selector' => '{{WRAPPER}} .image-hotspot-content .hostpot-content .hostpot-label',
            ]
        );

        $this->add_control(
            'content_title_color',
            [
                'label' => esc_html__('Title Color', 'bikys'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .image-hotspot-content .hostpot-content .hostpot-label' => 'color: {{VALUE}};',

                ],
            ]
        );
        $this->add_control(
            'content_title_color_hover',
            [
                'label' => esc_html__('Title Color Hover', 'bikys'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .image-hotspot-content .hostpot-content:hover .hostpot-label' => 'color: {{VALUE}};',

                ],
            ]
        );

        $this->add_control(
            'content_background_color',
            [
                'label' => esc_html__('Background Color', 'bikys'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .image-hotspot-content .hostpot-content' => 'background-color: {{VALUE}};',

                ],
            ]
        );


        $this->add_responsive_control(
            'content_padding',
            [
                'label'      => esc_html__('Padding', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .image-hotspot-content .hostpot-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_margin',
            [
                'label'      => esc_html__('Margin', 'bikys'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .image-hotspot-content .hostpot-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );


        $this->end_controls_section();

    }

    protected function render() {
        $settings       = $this->get_settings_for_display();
        $image_src      = $settings['image_hotspot_image'];
        $image_src_size = Group_Control_Image_Size::get_attachment_image_src($image_src['id'], 'background_image', $settings);
        if (empty($image_src_size)) {
            $image_src_size = $image_src['url'];
        }
        $id_int       = substr($this->get_id_int(), 0, 3);
        $content_html = '';
        ?>

        <div class="image-hotspot-wrapper">
            <img class="main-image-hotspot" alt="<?php echo esc_html__('Background', 'bikys'); ?>" src="<?php echo esc_url($image_src_size); ?>">
            <?php foreach ($settings['image_hotspot_icons'] as $index => $item) { ?>
                <?php
                $activate = $index == 0 ? 'active': '';
                $tab_count             = $index + 1;
                $class_item            = 'elementor-repeater-item-' . $item['_id'];
                $tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
                $this->add_render_attribute($tab_title_setting_key, [
                    'class'         => ['hotspot_dot', $class_item, $activate],
                    'data-controls' => '.hostpot-content-' . $id_int . $tab_count,
                ]);

                $tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
                $this->add_render_attribute($tab_content_setting_key, [
                    'class'         => ['hostpot-content', 'hostpot-content-'. $id_int . $tab_count, $activate ],
                    'data-controls' => '.' .$class_item,
                    'href' => $item['link']['url'] ? $item['link']['url'] : '#',
                ]);

                ob_start();
                ?>
                <a <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
                    <?php
                    $this->render_image($settings,$item);

                    printf('<span class="hostpot-label">%s</span>',$item['image_hotspot_text']);
                    ?>
                </a>
                <?php
                $content_html .= ob_get_clean();

                ?>
                <div <?php $this->print_render_attribute_string($tab_title_setting_key); ?>></div>
            <?php } ?>
            <div class="image-hotspot-content">
                <?php
                printf('%s',$content_html);
                ?>
            </div>
        </div>

        <?php
    }

    private function render_image($settings, $hospot) {
        if (!empty($hospot['hotspots_image']['url'])) {
            $hospot['image_size']             = $settings['image_size'];
            $hospot['image_custom_dimension'] = $settings['image_custom_dimension'];
            echo Group_Control_Image_Size::get_attachment_image_html($hospot, 'hotspots_image');
        }
    }
}

$widgets_manager->register(new Bikys_Image_hotspot());
