<?php
namespace EcafeAddons\Widgets;

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

use EcafeAddons\EcafeElementLoad;

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

class Ecafe_ImageSwap extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'imageswap', 'image swap' );
	}
	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 Swap', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'isEffect',
			array(
				'label'   => esc_html__( 'Effect', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'fade',
				'options' => array(
					'fade'           => esc_html__( 'Fade', 'essential-classy-addons-for-elementor' ),
					'zoom'           => esc_html__( 'Zoom', 'essential-classy-addons-for-elementor' ),
					'zoom-out'       => esc_html__( 'Zoom Out', 'essential-classy-addons-for-elementor' ),
					'slide-left'     => esc_html__( 'Slide Left', 'essential-classy-addons-for-elementor' ),
					'slide-right'    => esc_html__( 'Slide Right', 'essential-classy-addons-for-elementor' ),
					'slide-up'       => esc_html__( 'Slide Up', 'essential-classy-addons-for-elementor' ),
					'slide-down'     => esc_html__( 'Slide Down', 'essential-classy-addons-for-elementor' ),
					'rotate-in'      => esc_html__( 'Rotate In', 'essential-classy-addons-for-elementor' ),
					'flip-x'         => esc_html__( 'Flip X', 'essential-classy-addons-for-elementor' ),
					'flip-y'         => esc_html__( 'Flip Y', 'essential-classy-addons-for-elementor' ),
					'blur'           => esc_html__( 'Blur', 'essential-classy-addons-for-elementor' ),
					'gray'           => esc_html__( 'Gray', 'essential-classy-addons-for-elementor' ),
					'bright'         => esc_html__( 'Bright', 'essential-classy-addons-for-elementor' ),
					'sepia'          => esc_html__( 'Sepia', 'essential-classy-addons-for-elementor' ),
					'contrast'       => esc_html__( 'Contrast', 'essential-classy-addons-for-elementor' ),
					'scale-rotate'   => esc_html__( 'Scale Rotate', 'essential-classy-addons-for-elementor' ),
					'skew'           => esc_html__( 'Skew', 'essential-classy-addons-for-elementor' ),
					'curtain-left'   => esc_html__( 'Curtain Left', 'essential-classy-addons-for-elementor' ),
					'curtain-right'  => esc_html__( 'Curtain Right', 'essential-classy-addons-for-elementor' ),
					'curtain-top'    => esc_html__( 'Curtain Top', 'essential-classy-addons-for-elementor' ),
					'curtain-bottom' => esc_html__( 'Curtain Bottom', 'essential-classy-addons-for-elementor' ),
					'circle'         => esc_html__( 'Circle', 'essential-classy-addons-for-elementor' ),
					'circle2'        => esc_html__( 'Circle Reveal', 'essential-classy-addons-for-elementor' ),
					'diamond'        => esc_html__( 'Diamond', 'essential-classy-addons-for-elementor' ),
					'ripple'         => esc_html__( 'Ripple', 'essential-classy-addons-for-elementor' ),
					'pulse'          => esc_html__( 'Pulse', 'essential-classy-addons-for-elementor' ),
					'bounce'         => esc_html__( 'Bounce', 'essential-classy-addons-for-elementor' ),
					'rotate3d-y'     => esc_html__( 'Rotate3d Y', 'essential-classy-addons-for-elementor' ),
					'rotate3d-x'     => esc_html__( 'Rotate3d X', 'essential-classy-addons-for-elementor' ),
					'tilt'           => esc_html__( 'Tilt', 'essential-classy-addons-for-elementor' ),
					'zoom-rotate'    => esc_html__( 'Zoom Rotate', 'essential-classy-addons-for-elementor' ),
					'flash'          => esc_html__( 'Flash', 'essential-classy-addons-for-elementor' ),
					'shake'          => esc_html__( 'Shake', 'essential-classy-addons-for-elementor' ),
					'swing'          => esc_html__( 'Swing', 'essential-classy-addons-for-elementor' ),
					'wave'           => esc_html__( 'Wave', 'essential-classy-addons-for-elementor' ),
					'pixelate'       => esc_html__( 'Pixelate', 'essential-classy-addons-for-elementor' ),
					'gradient'       => esc_html__( 'Gradient', 'essential-classy-addons-for-elementor' ),
					'half-slide'     => esc_html__( 'Half Slide', 'essential-classy-addons-for-elementor' ),
					'half-vertical'  => esc_html__( 'Half Vertical', 'essential-classy-addons-for-elementor' ),
					'corner'         => esc_html__( 'Corner', 'essential-classy-addons-for-elementor' ),
					'tilt-shadow'    => esc_html__( 'Tilt Shadow', 'essential-classy-addons-for-elementor' ),
					'split-diagonal' => esc_html__( 'Split Diagonal', 'essential-classy-addons-for-elementor' ),
					'spiral'         => esc_html__( 'Spiral', 'essential-classy-addons-for-elementor' ),
					'zoom-flip'      => esc_html__( 'Zoom Flip', 'essential-classy-addons-for-elementor' ),
					'csh'            => esc_html__( 'C-S-H', 'essential-classy-addons-for-elementor' ),
					'split-h'        => esc_html__( 'Split Horizontal', 'essential-classy-addons-for-elementor' ),
					'split-v'        => esc_html__( 'Split Vertical', 'essential-classy-addons-for-elementor' ),
					'overlay-glow'   => esc_html__( 'Overlay Glow', 'essential-classy-addons-for-elementor' ),
					'ripple-mask'    => esc_html__( 'Ripple Mask', 'essential-classy-addons-for-elementor' ),
					'wave-curtain'   => esc_html__( 'Wave Curtain', 'essential-classy-addons-for-elementor' ),
					'neon-flicker'   => esc_html__( 'Neon Flicker', 'essential-classy-addons-for-elementor' ),
					'fire'           => esc_html__( 'Fire', 'essential-classy-addons-for-elementor' ),
					'hexagon'        => esc_html__( 'Hexagon', 'essential-classy-addons-for-elementor' ),
					'split-vertical' => esc_html__( 'Split', 'essential-classy-addons-for-elementor' ),
					'triangle'       => esc_html__( 'Triangle', 'essential-classy-addons-for-elementor' ),
					'pentagon'       => esc_html__( 'Pentagon', 'essential-classy-addons-for-elementor' ),
					'star'           => esc_html__( 'Star', 'essential-classy-addons-for-elementor' ),
					'rhombus'        => esc_html__( 'Rhombus', 'essential-classy-addons-for-elementor' ),
					'parallelogram'  => esc_html__( 'Parallelogram', 'essential-classy-addons-for-elementor' ),
					'octagon'        => esc_html__( 'Octagon', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'isNormalImage',
			array(
				'label'      => esc_html__( 'Normal Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_control(
			'isHoverImage',
			array(
				'label'      => esc_html__( 'Hover Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_control(
			'isLink',
			array(
				'label'         => esc_html__( 'Link', 'essential-classy-addons-for-elementor' ),
				'type'          => Controls_Manager::URL,
				'placeholder'   => esc_html__( 'https://your-link.com', 'essential-classy-addons-for-elementor' ),
				'show_external' => true,
				'default'       => array( 'url' => '#' ),
				'dynamic'       => array( 'active' => true ),
			)
		);
		$this->end_controls_section();

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

		$this->start_controls_section(
			'isgradientStyling',
			array(
				'label'     => esc_html__( 'Gradient : Image Swap', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'isEffect' => 'gradient',
				),
			)
		);
		$this->add_control(
			'isgradientNote',
			array(
				'type'            => Controls_Manager::RAW_HTML,
				'raw'             => esc_html__( 'Note : Only Gradient Color.', 'essential-classy-addons-for-elementor' ),
				'content_classes' => 'ec-description-note',
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'isgradientBg',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper.ec-is-gradient::after',
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'isoverlayglowStyling',
			array(
				'label'     => esc_html__( 'Overlay Glow : Image Swap', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'isEffect' => 'overlay-glow',
				),
			)
		);
		$this->add_control(
			'isoverlayglowColor',
			array(
				'label'     => esc_html__( 'Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .ec-image-swap-wrapper.ec-is-overlay-glow:after' => 'background: radial-gradient(circle,{{VALUE}} 0%,transparent 70%);',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'isStyling',
			array(
				'label' => esc_html__( 'Image Swap', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'simageMaxWidth',
			array(
				'label'      => esc_html__( 'Max Width', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 1,
						'max' => 500,
					),
					'%'  => array(
						'min'  => 1,
						'max'  => 100,
						'step' => 1,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper img' => 'max-width:{{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_responsive_control(
			'isPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIsStyle' );
		$this->start_controls_tab(
			'tabISN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'isBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'isBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img',
			)
		);
		$this->add_responsive_control(
			'isBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'isShadowN',
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img',
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIsH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'isBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'isBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img:hover',
			)
		);
		$this->add_responsive_control(
			'isBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper img:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'isShadowH',
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper img:hover',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'isBoxStyling',
			array(
				'label' => esc_html__( 'Image Swap Box', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'isBPadding',
			array(
				'label'      => esc_html__( 'Padding', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->start_controls_tabs( 'tabsIsBStyle' );
		$this->start_controls_tab(
			'tabISBN',
			array(
				'label' => esc_html__( 'Normal', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'isBBgN',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'isBBorderN',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper',
			)
		);
		$this->add_responsive_control(
			'isBBrN',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'isBShadowN',
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper',
			)
		);
		$this->add_control(
			'isBTransitionN',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all 0.3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-image-swap-wrapper' => 'transition: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabIsBH',
			array(
				'label' => esc_html__( 'Hover', 'essential-classy-addons-for-elementor' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'isBBgH',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper:hover',
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'isBBorderH',
				'label'    => esc_html__( 'Border', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper:hover',
			)
		);
		$this->add_responsive_control(
			'isBBrH',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-image-swap-wrapper:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'isBShadowH',
				'selector' => '{{WRAPPER}} .ec-image-swap-wrapper:hover',
			)
		);
		$this->add_control(
			'isBTransitionH',
			array(
				'label'       => esc_html__( 'Transition css', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => esc_html__( 'all 0.3s linear', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-image-swap-wrapper:hover' => 'transition: {{VALUE}};',
				),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$isEffect = ! empty( $settings['isEffect'] ) ? $settings['isEffect'] : 'fade';
		$isLink   = ! empty( $settings['isLink']['url'] ) ? $settings['isLink']['url'] : '';
		$output   = '<div class="ec-image-swap-wrapper ec-is-' . esc_attr( $isEffect ) . '">';
		$output  .= '<a href="' . esc_url( $isLink ) . '">';
		if ( ! empty( $settings['isNormalImage']['url'] ) ) {
			$isNormalImage = $settings['isNormalImage']['id'];
			$img           = wp_get_attachment_image_src( $isNormalImage, 'full' );
			$imgSrc        = $img[0];
			$imageId       = $settings['isNormalImage']['id'];
			$imageAlt      = get_post_meta( $imageId, '_wp_attachment_image_alt', true );
			if ( empty( $imageAlt ) ) {
				$imageAlt = get_the_title( $imageId );
			}
			$output .= '<img class="ec-is-image-n" src=' . esc_url( $imgSrc ) . ' alt="' . esc_attr( $imageAlt ) . '" />';
		}
		if ( ! empty( $settings['isHoverImage']['url'] ) ) {
			$isHoverImage = $settings['isHoverImage']['id'];
			$imgH         = wp_get_attachment_image_src( $isHoverImage, 'full' );
			$imgSrcH      = $imgH[0];
			$imageIdH     = $settings['isHoverImage']['id'];
			$imageAltH    = get_post_meta( $imageIdH, '_wp_attachment_image_alt', true );
			if ( empty( $imageAltH ) ) {
				$imageAltH = get_the_title( $imageIdH );
			}
			$output .= '<img class="ec-is-image-h" src=' . esc_url( $imgSrcH ) . ' alt="' . esc_attr( $imageAltH ) . '" />';
		}
		$output .= '</a>';
		$output .= '</div>';

		echo wp_kses_normalize_entities( $output );
	}
}
