<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;

use EcafeAddons\EcafeElementLoad;

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

class EcafeDualImage extends Widget_Base {

	public function get_name() {
		return 'ecafe-dual-image';
	}

	public function get_title() {
		return esc_html__( 'Dual Image', 'essential-classy-addons-for-elementor' );
	}

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-dual-image-icon';
	}

	public function get_categories() {
		return array( 'essential' );
	}


	public function get_keywords() {
		return array( 'image', 'dual image', 'image dual' );
	}

	public function get_custom_help_url() {
		return 'https://store.kapasias.com/helpdesk/';
	}
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}
	protected function register_controls() {

		$this->start_controls_section(
			'contentSection',
			array(
				'label' => esc_html__( 'Dual Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'image1Select',
			array(
				'label'      => esc_html__( 'Image 1', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_control(
			'image2Select',
			array(
				'label'      => esc_html__( 'Image 2', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_responsive_control(
			'diGap',
			array(
				'label'      => esc_html__( 'Gap', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 50,
					),
				),
				'default'    => array(
					'unit' => 'px',
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-dual-image-wrapper' => '--digap: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'diHoverImage',
			array(
				'label'      => esc_html__( 'Hover Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 50,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-dual-image-wrapper:hover > .ec-dual-image-2-wrap,
					{{WRAPPER}} .ec-dual-image-wrapper:hover > .ec-dual-image-1-wrap:hover' => '--dip: calc({{SIZE}}{{UNIT}} - var(--digap));',
					'{{WRAPPER}} .ec-dual-image-wrapper:hover > .ec-dual-image-1-wrap,
					{{WRAPPER}} .ec-dual-image-wrapper:hover > .ec-dual-image-1-wrap:hover + .ec-dual-image-2-wrap' => '--dip: calc(-{{SIZE}}{{UNIT}} - var(--digap));',
				),
			)
		);
		$this->end_controls_section();

		/*Notice panel*/
		$ecwidgetdemolink = esc_url( 'https://ecaddons.com/elements/dual-image/' );
		$ecwidgetdoclink  = esc_url( 'https://ecaddons.com/docs/dual-image-widget-tutorials/' );
		include ECAFE_PATH . 'element/widgets/ecafe-widgetpanel-help.php';

		$this->start_controls_section(
			'boxStyling',
			array(
				'label' => esc_html__( 'Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'boxBorder',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-dual-image-wrapper',
			)
		);
		$this->add_responsive_control(
			'boxBr',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-dual-image-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'boxShadow',
				'selector' => '{{WRAPPER}} .ec-dual-image-wrapper',
			)
		);
		$this->end_controls_section();
	}

	protected function render() {

		$settings      = $this->get_settings_for_display();
		$boxAlignItemC = ! empty( $settings['boxAlignItemC'] ) ? $settings['boxAlignItemC'] : 'start';

		$output = '<div class="ec-dual-image-wrapper ec-di-align-' . esc_attr( $boxAlignItemC ) . '">';
		if ( ! empty( $settings['image1Select']['url'] ) ) {
			$image1Select = $settings['image1Select']['id'];
			$img1         = wp_get_attachment_image_src( $image1Select, 'full' );
			$img1Src      = $img1[0];
			$image1Alt    = get_post_meta( $image1Select, '_wp_attachment_image_alt', true );
			if ( empty( $image1Alt ) ) {
				$image1Alt = get_the_title( $image1Select );
			}
			$output .= '<img class="ec-dual-image-wrap ec-dual-image-1-wrap" src=' . esc_url( $img1Src ) . ' alt="' . esc_attr( $image1Alt ) . '" />';
		}
		if ( ! empty( $settings['image2Select']['url'] ) ) {
			$image2Select = $settings['image2Select']['id'];
			$img2         = wp_get_attachment_image_src( $image2Select, 'full' );
			$img2Src      = $img2[0];
			$image2Alt    = get_post_meta( $image2Select, '_wp_attachment_image_alt', true );
			if ( empty( $image2Alt ) ) {
				$image2Alt = get_the_title( $image2Select );
			}
			$output .= '<img class="ec-dual-image-wrap ec-dual-image-2-wrap" src=' . esc_url( $img2Src ) . ' alt="' . esc_attr( $image2Alt ) . '" />';
		}
		$output .= '</div>';

		echo wp_kses_normalize_entities( $output );
	}
}
