<?php
namespace EcafeAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Css_Filter;

use EcafeAddons\EcafeElementLoad;

// Prevent direct access to files
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class Ecafe_ImageMaskLayer extends Widget_Base {

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

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

	public function get_icon() {
		return 'ecafe-ele-back-icon ecafe-image-mask-layer-icon';
	}
	public function get_categories() {
		return array( 'essential' );
	}
	public function get_keywords() {
		return array( 'image mask layer', 'layer image', 'advanced image', 'image effect', 'card effect' );
	}

	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__( 'Image Mask Layer', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'imageMaskL',
			array(
				'label'   => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array(
					'url' => \Elementor\Utils::get_placeholder_image_src(),
				),
			)
		);
		$this->add_control(
			'imageMaskUrl',
			array(
				'label'         => esc_html__( 'URL', 'essential-classy-addons-for-elementor' ),
				'type'          => Controls_Manager::URL,
				'placeholder'   => esc_html__( 'https://www.demo-link.com', 'essential-classy-addons-for-elementor' ),
				'dynamic'       => array( 'active' => true ),
				'show_external' => true,
			)
		);
		$this->add_responsive_control(
			'imageMaskPaddingSet',
			array(
				'label'      => esc_html__( 'Image Set', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 50,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper' => 'padding-top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();

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

		$this->start_controls_section(
			'leftImageStyling',
			array(
				'label' => esc_html__( 'Left Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'imageMaskLeftZIndex',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Z-Index', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 10000,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-1' => 'z-index: {{SIZE}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskLeftWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 15,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-1' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskLeftTop',
			array(
				'label'      => esc_html__( 'Top Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-1' => 'top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskLeftLeft',
			array(
				'label'      => esc_html__( 'Left Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 17,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-1' => 'left:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'middleImageStyling',
			array(
				'label' => esc_html__( 'Middle Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'imageMaskMiddleZIndex',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Z-Index', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 10000,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-2' => 'z-index: {{SIZE}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskMiddleWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 30,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-2' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskMiddleTop',
			array(
				'label'      => esc_html__( 'Top Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 0,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-2' => 'top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskMiddleLeft',
			array(
				'label'      => esc_html__( 'Left Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 35,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-2' => 'left:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'rightImageStyling',
			array(
				'label' => esc_html__( 'Right Image', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'imageMaskRightZIndex',
			array(
				'type'        => Controls_Manager::SLIDER,
				'label'       => esc_html__( 'Z-Index', 'essential-classy-addons-for-elementor' ),
				'size_units'  => array( 'px' ),
				'range'       => array(
					'px' => array(
						'min'  => 0,
						'max'  => 10000,
						'step' => 1,
					),
				),
				'render_type' => 'ui',
				'selectors'   => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-3' => 'z-index: {{SIZE}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskRightWidth',
			array(
				'label'      => esc_html__( 'Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 15,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-3' => 'width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskRightTop',
			array(
				'label'      => esc_html__( 'Top Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 10,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-3' => 'top:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'imageMaskRightLeft',
			array(
				'label'      => esc_html__( 'Left Offset', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%' ),
				'range'      => array(
					'%' => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 64,
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-mask-layer-wrapper > .ec-image-mask-layer-inner.ec-iml-3' => 'left:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();
	}

	protected function render() {
		$settings           = $this->get_settings_for_display();
		$imageMaskUrl       = ! empty( $settings['imageMaskUrl']['url'] ) ? esc_url( $settings['imageMaskUrl']['url'] ) : '';
		$imageMaskUrlTarget = $imageMaskUrlNoFollow = '';
		if ( ! empty( $imageMaskUrl ) ) {
			$imageMaskUrlTarget   = $settings['imageMaskUrl']['is_external'] ? ' target="_blank"' : '';
			$imageMaskUrlNoFollow = $settings['imageMaskUrl']['nofollow'] ? ' rel="nofollow"' : '';
		}
		if ( ! empty( $imageMaskUrl ) ) {
			$imageMaskUrlTarget   = ! empty( $settings['imageMaskUrl']['is_external'] ) ? ' target="_blank"' : '';
			$imageMaskUrlNoFollow = ! empty( $settings['imageMaskUrl']['nofollow'] ) ? ' rel="nofollow"' : '';
			$output               = '<a href="' . $imageMaskUrl . '"' . $imageMaskUrlTarget . $imageMaskUrlNoFollow . ' class="ec-image-mask-layer-wrapper">';
		} else {
			$output = '<div class="ec-image-mask-layer-wrapper">';
		}

		$image_src = '';
		if ( ! empty( $settings['imageMaskL']['id'] ) ) {
			$image_id  = $settings['imageMaskL']['id'];
			$image_src = wp_get_attachment_image_src( $image_id, 'full' );
			if ( ! empty( $image_src[0] ) ) {
				$image_src = $image_src[0];
			}
		} else {
			$image_src = ECAFE_ASSETS_PATH . 'images/placeholder.png';
		}
			$output     .= '<div class="ec-image-mask-layer-inner ec-iml-1">';
				$output .= '<div class="ec-iml-com ec-iml-com-front" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
				$output .= '<div class="ec-iml-com ec-iml-com-rotate" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
			$output     .= '</div>';
			$output     .= '<div class="ec-image-mask-layer-inner ec-iml-2">';
				$output .= '<div class="ec-iml-com ec-iml-com-front" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
				$output .= '<div class="ec-iml-com ec-iml-com-rotate" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
			$output     .= '</div>';
			$output     .= '<div class="ec-image-mask-layer-inner ec-iml-3">';
				$output .= '<div class="ec-iml-com ec-iml-com-front" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
				$output .= '<div class="ec-iml-com ec-iml-com-rotate" style="background-image:url(' . esc_url( $image_src ) . ');"></div>';
			$output     .= '</div>';

		if ( ! empty( $imageMaskUrl ) ) {
			$output .= '</a>';
		} else {
			$output .= '</div>';
		}
		echo wp_kses_normalize_entities( $output );
	}
}
