<?php

namespace SparkConstructionLiteElements\Modules\VideoPopup\Widgets;

// Elementor Classes
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Image_Size;
use Elementor\Icons_Manager;

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

class VideoPopup extends Widget_Base {

    /** Widget Name */
    public function get_name() {
        return 'ikreateThemes-video-popup';
    }

    /** Widget Title */
    public function get_title() {
        return esc_html__('Video PopUp', 'spark-construction-lite');
    }

    /** Icon */
    public function get_icon() {
        return 'eicon-play';
    }

    public function get_keywords() {
		return [ 'video', 'popup', 'lightbox' ];
	}

	public function get_script_depends() {
		return [ 'imagesloaded' ];
	}

    /** Category */
    public function get_categories() {
        return ['ikreateThemes-elements'];
    }

    /** Controls */
    protected function register_controls() {

        $this->start_controls_section(
            'section_content', [
                'label' => esc_html__('Content', 'spark-construction-lite'),
            ]
        );

        $this->add_control(
            'video_url', [
                'label' => esc_html__('Video URL', 'spark-construction-lite'),
                'type' => Controls_Manager::URL,
                'description' => esc_html__('To display YouTube, Vimeo or VK video, paste the video URL (https://www.youtube.com/watch?v=1IaZy0sDLu0)', 'spark-construction-lite'),
                'placeholder' => esc_html__('https://your-link.com', 'spark-construction-lite'),
                'show_external' => true,
                'default' => [
                    'url' => '',
                    'is_external' => true,
                    'nofollow' => true,
                ],
                'separator' => 'after'
            ]
        );

        $this->add_control(
            'icon_type', [
                'label' => esc_html__('Video Icon Type', 'spark-construction-lite'),
                'type' => Controls_Manager::SELECT,
                'default' => 'default',
                'label_block' => true,
                'options' => [
                    'default' => esc_html__('Default', 'spark-construction-lite'),
                    'icon' => esc_html__('Font & SVG Icon', 'spark-construction-lite'),
                    'image' => esc_html__('Image Icon', 'spark-construction-lite'),
                ],
            ]
        );

        $this->add_control(
            'font_icon', [
                'label' => esc_html__('Select Icon', 'spark-construction-lite'),
                'description' => esc_html__('On clicking the video play button, the video will show in popup.', 'spark-construction-lite'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'far fa-play-circle',
                    'library' => 'regular',
                ],
                'condition' => [
                    'icon_type' => ['icon'],
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_font_size', [
                'label' => esc_html__('Icon Font Size', 'spark-construction-lite'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                        'step' => 1,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 35,
                ],
                'condition' => [
                    'icon_type' => ['default','icon'],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-play-button i' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .ikthemes-play-button svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .ikthemes-box-shadow-ripples' => 'width: calc({{SIZE}}{{UNIT}} + 25px);; height: calc({{SIZE}}{{UNIT}} + 25px);;',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_padding', [
                'label' => esc_html__('Padding', 'spark-construction-lite'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%', 'em'],
                'default' => [
                    'top' => '50',
                    'right' => '0',
                    'bottom' => '50',
                    'left' => '0',
                    'unit' => 'px',
                    'isLinked' => false,
                ],
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-video-popup' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'image_icon', [
                'label' => esc_html__('Select Image', 'spark-construction-lite'),
                'type' => Controls_Manager::MEDIA,
                'description' => esc_html__('On clicking the video play button, the video will show in popup.', 'spark-construction-lite'),
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
                'condition' => [
                    'icon_type' => ['image'],
                ],
            ]
        );

        $this->add_responsive_control(
            'image_size', [
                'label' => esc_html__('Image Size', 'spark-construction-lite'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 500,
                        'step' => 1,
                    ]
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 35,
                ],
                'condition' => [
                    'icon_type' => ['image'],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-play-button img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .ikthemes-box-shadow-ripples' => 'width: calc({{SIZE}}{{UNIT}} + 25px); height: calc({{SIZE}}{{UNIT}} + 25px);',
                ],
            ]
        );

        $this->add_control(
            'default_icon_bg_color', [
                'label' => esc_html__('Background Color', 'spark-construction-lite'),
                'type' => Controls_Manager::COLOR,
                'default' => '#e85c0f',
                'condition' => [
                    'icon_type' => ['default','image','icon']
                ],
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-box-shadow-ripples:before ' => '--ik-color: {{VALUE}};',
                    '{{WRAPPER}} .ikthemes-box-shadow-ripples' => '--iktheme-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'default_icon_color', [
                'label' => esc_html__('Icon Color', 'spark-construction-lite'),
                'type' => Controls_Manager::COLOR,
                'default' => '',
                'condition' => [
                    'icon_type' => ['default','icon'],
                ],
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-play-button i' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .ikthemes-video-popup svg' => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_align',[
                'label' => esc_html__( 'Alignment', 'spark-construction-lite' ),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => esc_html__('Left', 'spark-construction-lite'),
                        'icon' => 'fa fa-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__('Center', 'spark-construction-lite'),
                        'icon' => 'fa fa-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__('Right', 'spark-construction-lite'),
                        'icon' => 'fa fa-align-right',
                    ],
                ],
                'default' => 'center',
                'separator' => 'before',
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-video-popup' => 'justify-content:{{VALUE}};'
                ],
                'selectors_dictionary' => [
                    'left' => 'flex-start',
                    'center' => 'center',
                    'right' => 'flex-end',
                ]
            ]
        );

        $this->add_control(
            'icon_shadow', [
                'label' => esc_html__('Remove Shadow', 'spark-construction-lite'),
                'type' => Controls_Manager::SWITCHER,
                'separator' => 'before',
                'label_on' => esc_html__('Yes', 'spark-construction-lite'),
                'label_off' => esc_html__('No', 'spark-construction-lite'),
                'return_value' => 'yes',
                'selectors' => [
                    '{{WRAPPER}} .ikthemes-box-shadow-ripples:before' => 'box-shadow: none !important;',
                ],
            ]
        );

        $this->end_controls_section();
    }

    /** Render Layout */
    protected function render() {

        $settings = $this->get_settings_for_display();

        $video_url = $settings['video_url']['url'];

        ?>
        <div class="ikthemes-video-popup">
            <a href="<?php echo esc_url($video_url); ?>" target="_blank" rel="ikthemesVideo[iframe]" class="ikthemes-box-shadow-ripples">
                
                <?php if ($settings['icon_type'] == 'default') { ?>

                    <span class="ikthemes-play-button"><i class="fa-solid fa-play"></i></span>

                <?php } elseif ($settings['icon_type'] == 'icon') { ?>

                    <span class="ikthemes-play-button">
                        <?php  Icons_Manager::render_icon($settings['font_icon'], ['aria-hidden' => 'true']); ?>
                    </span>

                <?php } elseif ($settings['icon_type'] == 'image') { ?>

                    <span class="ikthemes-play-button">
                        <?php echo Group_Control_Image_Size::get_attachment_image_html($settings, 'full', 'image_icon'); ?>
                    </span>
                <?php } ?>
            </a>
        </div>
        <?php
    }

}