<?php
namespace CSSIgniter\Ignition\Elementor\Widget;

class Image_Comparison extends \Elementor\Widget_Base {
	public function get_style_depends() {

		wp_register_style( 'twentytwenty', plugin_dir_url( __DIR__ ) . 'assets/vendor/twentytwenty/twentytwenty.css', array(), IGNITION_ELEMENTOR_WIDGETS_VERSION );

		return [
			'twentytwenty',
		];

	}

	public function get_script_depends() {

		wp_register_script( 'jquery-event-move', plugin_dir_url( __DIR__ ) . 'assets/vendor/jquery/jquery.event.move.js', array( 'jquery' ), '2.0.0', true );

		wp_register_script( 'twentytwenty', plugin_dir_url( __DIR__ ) . 'assets/vendor/twentytwenty/jquery.twentytwenty.js', array( 'jquery', 'jquery-event-move' ), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		wp_register_script( 'imagesloaded', plugin_dir_url( __DIR__ ) . 'assets/vendor/imagesloaded/jquery.imagesloaded.pkgd.min.js', array( 'jquery' ), '4.1.4', true );

		wp_register_script( 'ignition-elementor-image-comparison', plugin_dir_url( __DIR__ ) . 'assets/js/image-comparison.min.js', array( 'imagesloaded', 'twentytwenty' ), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		return [
			'ignition-elementor-image-comparison',
		];

	}

	public function get_name() {
		return 'ignition-image-comparison';
	}

	public function get_title() {
		return __( 'Image Comparison', 'ignition-elementor-widgets' );
	}

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

	public function get_categories() {
		return [ 'ignition-elementor-widgets' ];
	}

	protected function register_controls() {
		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Image Comparison', 'ignition-elementor-widgets' ),
			]
		);

		$this->add_control(
			'image_1',
			[
				'label' => __( 'Choose First Image', 'ignition-elementor-widgets' ),
				'type'  => \Elementor\Controls_Manager::MEDIA,
			]
		);

		$this->add_control(
			'image_2',
			[
				'label' => __( 'Choose Second Image', 'ignition-elementor-widgets' ),
				'type'  => \Elementor\Controls_Manager::MEDIA,
			]
		);

		$this->add_control(
			'offset',
			[
				'label'      => __( 'Image Offset', 'ignition-elementor-widgets' ),
				'type'       => \Elementor\Controls_Manager::SLIDER,
				'size_units' => [ '' ],
				'range'      => [
					'' => [
						'min'  => 0.1,
						'max'  => 0.9,
						'step' => 0.1,
					],
				],
				'default'    => [
					'unit' => '',
					'size' => 0.5,
				],
			]
		);

		$this->add_control(
			'orientation',
			[
				'label'   => __( 'Orientation', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => 'horizontal',
				'options' => [
					'horizontal' => __( 'Horizontal', 'ignition-elementor-widgets' ),
					'vertical'   => __( 'Vertical', 'ignition-elementor-widgets' ),
				],
			]
		);

		$this->add_control(
			'before_label',
			[
				'label'   => __( 'Before Label', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::TEXT,
				'default' => __( 'Before', 'ignition-elementor-widgets' ),
			]
		);

		$this->add_control(
			'after_label',
			[
				'label'   => __( 'After Label', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::TEXT,
				'default' => __( 'After', 'ignition-elementor-widgets' ),
			]
		);

		$this->add_control(
			'overlay',
			[
				'label'   => __( 'Overlay', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => 'false',
				'options' => [
					'false' => __( 'Show', 'ignition-elementor-widgets' ),
					'true'  => __( 'Hide', 'ignition-elementor-widgets' ),
				],
			]
		);

		$this->add_control(
			'hover',
			[
				'label'        => __( 'Move Slider On Hover', 'ignition-elementor-widgets' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'your-plugin' ),
				'label_off'    => __( 'No', 'your-plugin' ),
				'return_value' => 'true',
				'default'      => 'false',
			]
		);

		$this->add_control(
			'click',
			[
				'label'        => __( 'Move Slider By Clicking Anywhere', 'ignition-elementor-widgets' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'your-plugin' ),
				'label_off'    => __( 'No', 'your-plugin' ),
				'return_value' => 'true',
				'default'      => 'true',
			]
		);

		$this->add_control(
			'handle',
			[
				'label'        => __( 'Move Slider Only With Handle', 'ignition-elementor-widgets' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => __( 'Yes', 'your-plugin' ),
				'label_off'    => __( 'No', 'your-plugin' ),
				'return_value' => 'true',
				'default'      => 'false',
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings     = $this->get_settings();
		$offset       = $settings['offset']['size'];
		$orientation  = $settings['orientation'];
		$before_label = $settings['before_label'];
		$after_label  = $settings['after_label'];
		$overlay      = $settings['overlay'];
		$hover        = $settings['hover'];
		$handle       = $settings['handle'];
		$click        = $settings['click'];

		if ( 'true' === $handle ) {
			$click = false;
			$hover = false;
		}

		$image_1_html = \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings, 'large', 'image_1' );
		$image_2_html = \Elementor\Group_Control_Image_Size::get_attachment_image_html( $settings, 'large', 'image_2' );
		?>

		<div id="ignition-image-comparison-<?php echo esc_attr( $this->get_id() ); ?>" class="ignition-image-comparison" data-offset="<?php echo floatval( $offset ); ?>" data-orientation="<?php echo esc_attr( $orientation ); ?>" data-before-label="<?php echo esc_attr( $before_label ); ?>" data-after-label="<?php echo esc_attr( $after_label ); ?>" data-overlay="<?php echo esc_attr( $overlay ); ?>" data-hover="<?php echo esc_attr( $hover ); ?>" data-handle="<?php echo esc_attr( $handle ); ?>" data-click="<?php echo esc_attr( $click ); ?>">
			<?php echo wp_kses_post( $image_1_html ); ?>
			<?php echo wp_kses_post( $image_2_html ); ?>
		</div>

		<?php
	}

	protected function content_template() {}
}
