<?php
namespace Elementor;

class ThemeDraft_Video_Popup_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_video_popup';
	}

	public function get_title() {
		return esc_html__( 'Video Popup', 'themedraft-core' );
	}

	public function get_icon() {

		return 'eicon-youtube';
	}

	public function get_categories() {
		return [ 'themedraft_elements' ];
	}


	protected function register_controls() {

		//Content tab start
		$this->start_controls_section(
			'video_popup_settings',
			[
				'label' => esc_html__( 'Video Popup Options', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'video_url',
			[
				'label'       => __( 'Video Url', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXT,
				'label_block'        => true,
				'default'     => __( 'https://vimeo.com/100902001', 'themedraft-core' ),
				'placeholder' => __( 'https://your-link.com', 'themedraft-core' ),
			]
		);
		
		$this->add_control(
		    'overlay',
		    [
		        'label'     => esc_html__( 'Enable Overlay', 'themedraft-core' ),
		        'type'      => Controls_Manager::SWITCHER,
		        'label_on'  => esc_html__( 'Yes', 'themedraft-core' ),
		        'label_off' => esc_html__( 'No', 'themedraft-core' ),
		        'default'   => 'yes',
		    ]
		);

		$this->add_responsive_control(
			'button_size',
			[
				'label' => __( 'Button Size', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 50,
						'max' => 200,
					],
				],
				'devices' => [ 'desktop', 'tablet', 'mobile' ],

				'selectors' => [
					'{{WRAPPER}} .td-video-popup-wrapper .td-video-button:before, {{WRAPPER}} .td-video-popup-wrapper .td-video-button:after' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
		    'video_height',
		    [
		        'label' => __( 'Height', 'themedraft-core' ),
		        'type' => Controls_Manager::SLIDER,
		        'size_units' => ['px'],
		        'range' => [
		            'px' => [
		                'min' => 200,
		                'max' => 1000,
		            ],
		        ],
		        'devices' => [ 'desktop', 'tablet', 'mobile' ],
		        'selectors' => [
		            '{{WRAPPER}} .td-video-popup-wrapper .td-video-popup-image' => 'height: {{SIZE}}{{UNIT}};',
		        ],
		    ]
		);


		$this->add_control(
			'entrance_animation',
			[
				'label' => __( 'Entrance Animation', 'themedraft-core' ),
				'type' => Controls_Manager::ANIMATION,
				'prefix_class' => 'animated ',
			]
		);

		$this->add_control(
			'video_animation_duration',
			[
				'label'     => __( 'Animation Duration', 'themedraft-core' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'data-wow-duration="1.25s"',
				'options'   => [
					'data-wow-duration="2s"'    => __( 'Slow', 'themedraft-core' ),
					'data-wow-duration="1.25s"' => __( 'Normal', 'themedraft-core' ),
					'data-wow-duration=".75s"'  => __( 'Fast', 'themedraft-core' ),
				],
				'condition' => [
					'entrance_animation!' => '',
				]
			]
		);

		$this->end_controls_section();


		//Style tab start
		$this->start_controls_section(
			'video_popup_style',
			[
				'label' => esc_html__( 'Colors', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'video_background_image',
				'label' => __( 'Background', 'themedraft-core' ),
				'types' => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .td-video-popup-image',
			]
		);


		$this->add_control(
		    'button_bg_color',
		    [
		        'label'       => esc_html__('Button Background Color', 'themedraft-core'),
		        'type'        => Controls_Manager::COLOR,
		        'selectors'   => [
		            '{{WRAPPER}} .td-video-popup-wrapper .td-video-button:before, {{WRAPPER}} .td-video-popup-wrapper .td-video-button:after' => 'background-color: {{VALUE}};',
		        ],
		    ]
		);

		$this->add_control(
			'button_icon_color',
			[
				'label'       => esc_html__('Button Icon Color', 'themedraft-core'),
				'type'        => Controls_Manager::COLOR,
				'selectors'   => [
					'{{WRAPPER}} .td-video-popup-wrapper .td-video-button i' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
		    'overlay_color',
		    [
		        'label'       => esc_html__('Overlay Color', 'themedraft-core'),
		        'type'        => Controls_Manager::COLOR,
		        'selectors'   => [
		            '{{WRAPPER}} .td-video-overlay' => 'background-color: {{VALUE}};',
		        ],
                'condition' => [
                    'overlay' => 'yes',
                ],
		    ]
		);

		$this->end_controls_section();


	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		if($settings['entrance_animation']){
			$td_animation = 'wow'.' ' . $settings['entrance_animation'];
			$td_animation_duration = $settings['video_animation_duration'];
		}else{
			$td_animation ='';
			$td_animation_duration ='';
		}
		?>

		<div class="td-video-popup-wrapper <?php echo $td_animation;?>" <?php echo $td_animation_duration;?>>
			<div class="td-video-popup-image td-cover-bg">
                <?php if ($settings['overlay'] == 'yes') : ?>
                <div class="td-video-overlay"></div>
                <?php endif; ?>
                <a href="<?php echo esc_url($settings['video_url']);?>" class="td-video-button mfp-iframe">
                    <i class="fa fa-play"></i>
                </a>
            </div>
		</div>
        <script>
            jQuery(document).ready(function ($) {
                $(".td-video-button").magnificPopup({
                    type: 'video',
                });
            });
        </script>

		<?php

	}

	//Template
	protected function content_template() { ?>

        <div class="td-video-popup-wrapper">
            <div class="td-video-popup-image">
                <# if ( settings.overlay == 'yes' ) { #>
                <div class="td-video-overlay"></div>
                <# } #>
                <a href="{{{settings.video_url}}}" class="td-video-button mfp-iframe">
                    <i class="fa fa-play"></i>
                </a>
            </div>
        </div>
        <script>
            jQuery(document).ready(function ($) {
                $(".td-video-button").magnificPopup({
                    type: 'video',
                });
            });

        </script>

<?php
	}
}

Plugin::instance()->widgets_manager->register( new ThemeDraft_Video_Popup_Widget );