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

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

		wp_register_style( 'ignition-elementor-image-hover-effects', plugin_dir_url( __DIR__ ) . 'assets/css/image-hover-effects.min.css', array(), IGNITION_ELEMENTOR_WIDGETS_VERSION );

		return [
			'ignition-elementor-image-hover-effects',
		];

	}

	public function get_script_depends() {

		wp_register_script( 'three', plugin_dir_url( __DIR__ ) . 'assets/vendor/threejs/three.min.js', array(), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		wp_register_script( 'jstween', plugin_dir_url( __DIR__ ) . 'assets/vendor/tween/jstween.js', array(), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		wp_register_script( 'hover', plugin_dir_url( __DIR__ ) . 'assets/vendor/hover/hover.js', array(), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		wp_register_script( 'ignition-elementor-image-hover-effects', plugin_dir_url( __DIR__ ) . 'assets/js/image-hover-effects.min.js', array( 'three', 'jstween', 'hover', 'jquery' ), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		return [
			'ignition-elementor-image-hover-effects',
		];

	}

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

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

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

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

	protected function register_controls() {
		$this->start_controls_section(
			'section_title',
			[
				'label' => __( 'Image Hover Effects', '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(
			'displacement_image',
			[
				'label'   => __( 'Displacement Image', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => '1',
				'options' => [
					'1'  => __( '1', 'ignition-elementor-widgets' ),
					'2'  => __( '2', 'ignition-elementor-widgets' ),
					'3'  => __( '3', 'ignition-elementor-widgets' ),
					'4'  => __( '4', 'ignition-elementor-widgets' ),
					'5'  => __( '5', 'ignition-elementor-widgets' ),
					'6'  => __( '6', 'ignition-elementor-widgets' ),
					'7'  => __( '7', 'ignition-elementor-widgets' ),
					'8'  => __( '8', 'ignition-elementor-widgets' ),
					'9'  => __( '9', 'ignition-elementor-widgets' ),
					'10' => __( '10', 'ignition-elementor-widgets' ),
					'11' => __( '11', 'ignition-elementor-widgets' ),
					'12' => __( '12', 'ignition-elementor-widgets' ),
					'13' => __( '13', 'ignition-elementor-widgets' ),
					'14' => __( '14', 'ignition-elementor-widgets' ),
					'15' => __( '15', 'ignition-elementor-widgets' ),
					'16' => __( '16', 'ignition-elementor-widgets' ),
					'17' => __( '17', 'ignition-elementor-widgets' ),
				],
			]
		);

		$this->add_control(
			'link',
			[
				'label'       => __( 'Link', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::URL,
				'placeholder' => 'http://your-link.com',
			]
		);

		$this->end_controls_section();

	}

	protected function render() {
		$settings           = $this->get_settings();
		$displacement_image = $settings['displacement_image'];
		$link               = $settings['link'];
		$target             = $link['is_external'] ? ' target="_blank"' : '';
		$nofollow           = $link['nofollow'] ? ' rel="nofollow"' : '';

		$image_1                = wp_get_attachment_image_src( $settings['image_1']['id'], 'full' );
		$image_2                = wp_get_attachment_image_src( $settings['image_2']['id'], 'full' );
		$displacement_image_url = plugin_dir_url( dirname( __FILE__ ) ) . 'assets/images/displacements/' . intval( $displacement_image ) . '.jpg';

		?>
				<div id="ignition-image-hover-effects-<?php echo esc_attr( $this->get_id() ); ?>" class="ignition-image-hover-effects" data-image1="<?php echo esc_url( $image_1[0] ); ?>" data-image2="<?php echo esc_url( $image_2[0] ); ?>" data-displacement="<?php echo esc_url( $displacement_image_url ); ?>" style="padding-top:calc(<?php echo intval( $image_1[2] ); ?> / <?php echo intval( $image_1[1] ); ?> * 100%);">
					<?php if ( $link['url'] ) : ?>
						<a href="<?php echo esc_url( $link['url'] ); ?>" <?php echo $target . $nofollow; ?>  >
					<?php endif; ?>
						<div class="img-container"></div>
					<?php if ( $link ) : ?>
						</a>
					<?php endif; ?>
				</div>
			<?php
	}

	protected function content_template() {}
}
