<?php
namespace Elementor;

class Themedraft_Image_Compare_Widget extends Widget_Base {

	public function get_name() {

		return 'themedraft_image_compare';
	}

	public function get_title() {
		return esc_html__( 'Image Compare', 'themedraft-core' );
	}

	public function get_icon() {

		return 'eicon-image';
	}

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

	public function get_script_depends() {
		return ['event-move', 'twentytwenty'];
	}

	protected function register_controls() {

		$this->start_controls_section(
			'td_compare_image',
			[
				'label' => esc_html__('Images', 'themedraft-core'),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->start_controls_tabs('td_compare_image_tabs');

		//Before tab start
		$this->start_controls_tab(
			'td_compare_before_image',
			[
				'label' => esc_html__('Before', 'themedraft-core'),
			]
		);

		$this->add_control(
			'before_image',
			[
				'label'       => __( 'Image', 'themedraft-core' ),
				'type'        => Controls_Manager::MEDIA,
				'label_block' => true,
				'default'     => [
					'url' => Utils::get_placeholder_image_src(),
				],
			]
		);

		$this->add_control(
			'before_label',
			[
				'label'       => __( 'Label', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => __( 'Before', 'themedraft-core' ),
			]
		);


		$this->end_controls_tab();//Before tab end

		//After tab start
		$this->start_controls_tab(
			'td_compare_after_image',
			[
				'label' => esc_html__('After', 'themedraft-core'),
			]
		);

		$this->add_control(
			'after_image',
			[
				'label'       => __( 'Image', 'themedraft-core' ),
				'type'        => Controls_Manager::MEDIA,
				'label_block' => true,
				'default'     => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'description'     => __( 'It\'s required to use same size image as before image.', 'themedraft-core' ),
			]
		);

		$this->add_control(
			'after_label',
			[
				'label'       => __( 'Label', 'themedraft-core' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => __( 'After', 'themedraft-core' ),
			]
		);

		$this->end_controls_tabs();

		$this->end_controls_section();


		$this->start_controls_section(
			'td_compare_image_settings',
			[
				'label' => esc_html__( 'Settings', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'offset',
			[
				'label' => __( 'Visibility Ratio', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1,
						'step' => .1,
					],
				],
				'default' => [
					'size' => .5,
				],
			]
		);

		$this->add_control(
			'direction',
			[
				'label' => __( 'Direction', 'themedraft-core' ),
				'type' => Controls_Manager::CHOOSE,
				'label_block' => false,
				'options' => [
					'horizontal' => [
						'title' => __( 'Horizontal', 'themedraft-core' ),
						'icon' => 'fa fa-arrows-h',
					],
					'vertical' => [
						'title' => __( 'Vertical', 'themedraft-core' ),
						'icon' => 'fa fa-arrows-v',
					],
				],
				'default' => 'horizontal',
			]
		);

		$this->add_control(
			'move_handle',
			[
				'label' => __( 'Move Handle', 'themedraft-core' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'on_swipe',
				'options' => [
					'on_hover' => __( 'On Hover', 'themedraft-core' ),
					'on_swipe' => __( 'On Swipe', 'themedraft-core' ),
				],
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'image_handle_style_option',
			[
				'label' => esc_html__( 'Handel & Overlay', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'handle_color',
			[
				'label' => __( 'Color', 'themedraft-core' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-handle:before, {{WRAPPER}} .twentytwenty-handle:after' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .twentytwenty-handle' => 'border-color: {{VALUE}}',
					'{{WRAPPER}} .twentytwenty-left-arrow' => 'border-right-color: {{VALUE}}',
					'{{WRAPPER}} .twentytwenty-right-arrow' => 'border-left-color: {{VALUE}}',
					'{{WRAPPER}} .twentytwenty-up-arrow' => 'border-bottom-color: {{VALUE}}',
					'{{WRAPPER}} .twentytwenty-down-arrow' => 'border-top-color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'line_size',
			[
				'label' => __( 'Line Size', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-horizontal .twentytwenty-handle:before, {{WRAPPER}} .twentytwenty-horizontal .twentytwenty-handle:after' => 'width: {{SIZE}}{{UNIT}}; margin-left: calc(-0px - {{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .twentytwenty-vertical .twentytwenty-handle:before, {{WRAPPER}} .twentytwenty-vertical .twentytwenty-handle:after' => 'height: {{SIZE}}{{UNIT}}; margin-top: calc(-0px - {{SIZE}}{{UNIT}} / 2);',
				],
			]
		);

		$this->add_responsive_control(
			'arrow_box_width',
			[
				'label' => __( 'Arrow Box Width', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 250,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-handle' => 'width: {{SIZE}}{{UNIT}}; margin-left: calc(-1 * ({{SIZE}}{{UNIT}} / 2));',
					'{{WRAPPER}} .twentytwenty-vertical .twentytwenty-handle:before' => 'margin-left: calc(({{SIZE}}{{UNIT}} / 2) - 1px);',
					'{{WRAPPER}} .twentytwenty-vertical .twentytwenty-handle:after' => 'margin-right: calc(({{SIZE}}{{UNIT}} / 2) - 1px);',
				],
			]
		);
		$this->add_responsive_control(
			'arrow_box_height',
			[
				'label' => __( 'Arrow Box Height', 'themedraft-core' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 250,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-handle' => 'height: {{SIZE}}{{UNIT}}; margin-top: calc(-1 * ({{SIZE}}{{UNIT}} / 2));',
					'{{WRAPPER}} .twentytwenty-horizontal .twentytwenty-handle:before' => 'margin-bottom: calc(({{SIZE}}{{UNIT}} / 2) + 0px);',
					'{{WRAPPER}} .twentytwenty-horizontal .twentytwenty-handle:after' => 'margin-top: calc(({{SIZE}}{{UNIT}} / 2) + 0px);',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'box_border',
				'selector' => '{{WRAPPER}} .twentytwenty-handle',
				'exclude' => [
					'color'
				]
			]
		);

		$this->add_responsive_control(
			'box_border_radius',
			[
				'label' => __( 'Border Radius', 'themedraft-core' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-handle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

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

				'description'     => __( 'Select overlay color. Don\'t want to use overlay? Select a color and make transparent for hide overlay.', 'themedraft-core' ),
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'image_compare_label_style',
			[
				'label' => __( 'Label', 'themedraft-core' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'label_typography',
				'selector' => '{{WRAPPER}} .twentytwenty-before-label:before, {{WRAPPER}} .twentytwenty-after-label:before',
			]
		);

		$this->add_control(
			'label_color',
			[
				'label' => __( 'Color', 'themedraft-core' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-before-label:before, {{WRAPPER}} .twentytwenty-after-label:before' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'label_bg_color',
			[
				'label' => __( 'Background Color', 'themedraft-core' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-before-label:before, {{WRAPPER}} .twentytwenty-after-label:before' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'label_padding',
			[
				'label' => __( 'Padding', 'themedraft-core' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'{{WRAPPER}} .twentytwenty-before-label:before, {{WRAPPER}} .twentytwenty-after-label:before' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);


		$this->end_controls_section();

	}

	//Render
	protected function render() {
		$settings = $this->get_settings_for_display();
		$before_image_url = $settings['before_image']['url'];
		$before_image_alt = get_post_meta( $settings['before_image']['id'], '_wp_attachment_image_alt', true );
		$after_image_url = $settings['after_image']['url'];
		$after_image_alt = get_post_meta( $settings['after_image']['id'], '_wp_attachment_image_alt', true );
		$before_label = $settings['before_label'];
		$after_label = $settings['after_label'];
		$offset = $settings['offset']['size'];
		$move_handel = $settings['move_handle'] == 'on_hover' ? true : false;
		?>

		<?php if($settings['direction'] === 'horizontal' ){ ?>
			<div class="td-image-compare-wrapper">
				<div class="twentytwenty-container">
					<img src="<?php echo esc_url($before_image_url);?>" alt="<?php echo esc_attr($before_image_alt);?>">
					<img src="<?php echo esc_url($after_image_url);?>" alt="<?php echo esc_attr($after_image_alt);?>">
				</div>

				<script>
                    (function ($) {
                        "use strict";
                        $( document ).ready(function() {
                            $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({
                                default_offset_pct: <?php echo json_encode($offset); ?>,
                                before_label: <?php echo json_encode($before_label); ?>,
                                after_label: <?php echo json_encode($after_label); ?>,
                                move_slider_on_hover: <?php echo json_encode($move_handel); ?>,
                            });
                        });
                    })(jQuery);
				</script>
			</div>

			<?php

		}else{ ?>

			<div class="td-image-compare-wrapper">
				<div class="twentytwenty-container" data-orientation="vertical">
					<img src="<?php echo esc_url($before_image_url);?>" alt="<?php echo esc_attr($before_image_alt);?>" />
					<img src="<?php echo esc_url($after_image_url);?>" alt="<?php echo esc_attr($after_image_alt);?>">
				</div>

				<script>
                    (function ($) {
                        "use strict";
                        $( document ).ready(function() {
                            $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({
                                orientation: 'vertical',
                                default_offset_pct: <?php echo json_encode($offset); ?>,
                                before_label: <?php echo json_encode($before_label); ?>,
                                after_label: <?php echo json_encode($after_label); ?>,
                                move_slider_on_hover: <?php echo json_encode($move_handel); ?>,
                            });
                        });
                    })(jQuery);
				</script>
			</div>

			<?php

		}

	}

	//Template
	protected function _content_template() {
	}
}

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