<?php
namespace EcafeAddons\Widgets;

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

use EcafeAddons\EcafeElementLoad;

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

class EcafeCreativeGallery extends Widget_Base {

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

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

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

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

	public function get_keywords() {
		return array( 'creative gallery', 'gallery', 'images', 'clip', 'clip path' );
	}

	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__( 'Creative Gallery', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);
		$this->add_control(
			'cgType',
			array(
				'label'   => esc_html__( 'Type', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'repeater',
				'options' => array(
					'repeater' => esc_html__( 'Repeater', 'essential-classy-addons-for-elementor' ),
					'gallery'  => esc_html__( 'Gallery', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'pattern',
			array(
				'label'   => esc_html__( 'Pattern', 'essential-classy-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'layout1',
				'options' => array(
					'layout1'      => esc_html__( 'Pattern 1', 'essential-classy-addons-for-elementor' ),
					'layout2'      => esc_html__( 'Pattern 2', 'essential-classy-addons-for-elementor' ),
					'layout3'      => esc_html__( 'Pattern 3', 'essential-classy-addons-for-elementor' ),
					'layout4'      => esc_html__( 'Pattern 4', 'essential-classy-addons-for-elementor' ),
					'layout5'      => esc_html__( 'Pattern 5', 'essential-classy-addons-for-elementor' ),
					'layout6'      => esc_html__( 'Pattern 6', 'essential-classy-addons-for-elementor' ),
					'layout7'      => esc_html__( 'Pattern 7', 'essential-classy-addons-for-elementor' ),
					'layout8'      => esc_html__( 'Pattern 8', 'essential-classy-addons-for-elementor' ),
					'layout9'      => esc_html__( 'Pattern 9', 'essential-classy-addons-for-elementor' ),
					'layout10'     => esc_html__( 'Pattern 10', 'essential-classy-addons-for-elementor' ),
					'layout11'     => esc_html__( 'Pattern 11', 'essential-classy-addons-for-elementor' ),
					'layout12'     => esc_html__( 'Pattern 12', 'essential-classy-addons-for-elementor' ),
					'layout13'     => esc_html__( 'Pattern 13', 'essential-classy-addons-for-elementor' ),
					'layout14'     => esc_html__( 'Pattern 14', 'essential-classy-addons-for-elementor' ),
					'layout15'     => esc_html__( 'Pattern 15', 'essential-classy-addons-for-elementor' ),
					'layout16'     => esc_html__( 'Pattern 16', 'essential-classy-addons-for-elementor' ),
					'layout17'     => esc_html__( 'Pattern 17', 'essential-classy-addons-for-elementor' ),
					'layout18'     => esc_html__( 'Pattern 18', 'essential-classy-addons-for-elementor' ),
					'layout19'     => esc_html__( 'Pattern 19', 'essential-classy-addons-for-elementor' ),
					'layout20'     => esc_html__( 'Pattern 20', 'essential-classy-addons-for-elementor' ),
					'layout21'     => esc_html__( 'Pattern 21', 'essential-classy-addons-for-elementor' ),
					'layout22'     => esc_html__( 'Pattern 22', 'essential-classy-addons-for-elementor' ),
					'layout23'     => esc_html__( 'Pattern 23', 'essential-classy-addons-for-elementor' ),
					'layout24'     => esc_html__( 'Pattern 24', 'essential-classy-addons-for-elementor' ),
					'layout25'     => esc_html__( 'Pattern 25', 'essential-classy-addons-for-elementor' ),
					'layoutcustom' => esc_html__( 'Custom Pattern', 'essential-classy-addons-for-elementor' ),
				),
			)
		);
		$this->add_control(
			'layoutcustomPath',
			array(
				'label'       => esc_html__( 'Clip Path', 'essential-classy-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXTAREA,
				'dynamic'     => array( 'active' => true ),
				'placeholder' => esc_html__( 'path("XXX")', 'essential-classy-addons-for-elementor' ),
				'selectors'   => array(
					'{{WRAPPER}} .ec-creative-gallery-wrapper.layoutcustom article img,
					.ec-creative-gallery-wrapper.layoutcustom article a' => 'clip-path:{{VALUE}};',
				),
				'condition'   => array(
					'pattern' => 'layoutcustom',
				),
			)
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'imageSelect',
			array(
				'label'      => esc_html__( 'Image', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::MEDIA,
				'media_type' => 'image',
				'dynamic'    => array(
					'active' => true,
				),
			)
		);
		$this->add_control(
			'imageSelectTabs',
			array(
				'label'     => '',
				'type'      => Controls_Manager::REPEATER,
				'fields'    => $repeater->get_controls(),
				'condition' => array(
					'cgType' => 'repeater',
				),
			)
		);
		$this->add_control(
			'imageGallery',
			array(
				'label'     => __( 'Images', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::GALLERY,
				'default'   => array(),
				'condition' => array(
					'cgType' => 'gallery',
				),
			)
		);
		$this->add_control(
			'imagePopup',
			array(
				'label'     => esc_html__( 'Popup Image', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'tabletNormal',
			array(
				'label'     => esc_html__( 'Normal List in Tablet', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->add_control(
			'mobileNormal',
			array(
				'label'     => esc_html__( 'Normal List in Mobile', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => esc_html__( 'Enable', 'essential-classy-addons-for-elementor' ),
				'label_off' => esc_html__( 'Disable', 'essential-classy-addons-for-elementor' ),
				'default'   => 'no',
			)
		);
		$this->end_controls_section();

		/*Tilt Effect Options*/
		include ECAFE_PATH . 'element/widgets/ecafe-tilt-options.php';

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

		/*style start*/
		$this->start_controls_section(
			'creativeGalleryStyling',
			array(
				'label' => esc_html__( 'Creative Gallery', 'essential-classy-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_responsive_control(
			'cgRGap',
			array(
				'label'      => esc_html__( 'Row Gap', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px'      => array(
						'min' => 0,
						'max' => 150,
					),
					'default' => array(
						'size' => 20,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-creative-gallery-wrapper article' => 'row-gap:{{SIZE}}px;',
				),
			)
		);
		$this->add_responsive_control(
			'cgCGap',
			array(
				'label'      => esc_html__( 'Column Gap', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px'      => array(
						'min' => 0,
						'max' => 150,
					),
					'default' => array(
						'size' => 20,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .ec-creative-gallery-wrapper article' => 'column-gap:{{SIZE}}px;',
				),
			)
		);
		$this->add_control(
			'cgBoxHoverheading',
			array(
				'label'     => esc_html__( 'Box Hover', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			array(
				'name'     => 'cgBoxHoverFilters',
				'label'    => esc_html__( 'Filter', 'essential-classy-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .ec-creative-gallery-wrapper article:hover img:not(:hover),{{WRAPPER}} .ec-creative-gallery-wrapper article:focus img:not(:focus)',
			)
		);
		$this->add_control(
			'cgImageHoverheading',
			array(
				'label'     => esc_html__( 'Image Hover', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'cgImageHoverBR',
			array(
				'label'      => esc_html__( 'Border Radius', 'essential-classy-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .ec-creative-gallery-wrapper article img:hover,
					{{WRAPPER}} .ec-creative-gallery-wrapper article img:focus,
					{{WRAPPER}} .ec-creative-gallery-wrapper article a:hover,
					{{WRAPPER}} .ec-creative-gallery-wrapper article a:focus' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'creativeGalleryPopupStyling',
			array(
				'label'     => esc_html__( 'Popup General on Page', 'essential-classy-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'imagePopup' => 'yes',
				),
			)
		);
		$this->add_control(
			'cgpBorderColor',
			array(
				'label'     => esc_html__( 'Border Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'.lightbox .lb-image' => 'border-color: {{VALUE}} !important;',
				),
			)
		);
		$this->add_control(
			'cgpDetailsColor',
			array(
				'label'     => esc_html__( 'Number Details', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'.lb-data .lb-details .lb-number' => 'color: {{VALUE}} !important;',
				),
			)
		);
		$this->add_control(
			'cgpOverlayColor',
			array(
				'label'     => esc_html__( 'Overlay Color', 'essential-classy-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'.lightboxOverlay' => 'background-color: {{VALUE}} !important;',
				),
			)
		);
		$this->end_controls_section();
		/*style end*/
	}

	protected function render() {

		$settings     = $this->get_settings_for_display();
		$uid          = uniqid( 'creativegallery' );
		$imagePopup   = isset( $settings['imagePopup'] ) ? $settings['imagePopup'] : 'no';
		$tabletNormal = isset( $settings['tabletNormal'] ) ? $settings['tabletNormal'] : 'no';
		$mobileNormal = isset( $settings['mobileNormal'] ) ? $settings['mobileNormal'] : 'no';
		$pattern      = ! empty( $settings['pattern'] ) ? $settings['pattern'] : 'layout1';

		$tabletNormalClass = $mobileNormalClass = '';
		if ( isset( $tabletNormal ) && $tabletNormal == 'yes' ) {
			$tabletNormalClass = ' ec-cg-tab-disable';
		}
		if ( isset( $mobileNormal ) && $mobileNormal == 'yes' ) {
			$mobileNormalClass = ' ec-cg-mob-disable';
		}
		if ( isset( $imagePopup ) && $imagePopup == 'yes' ) {
			wp_enqueue_style( 'ecafe-lightbox', ECAFE_ASSETS_PATH . 'css/baharni/lightbox.css', array(), ECAFE_VERSION );
			wp_enqueue_script( 'ecafe-lightbox', ECAFE_ASSETS_PATH . 'js/baharni/lightbox.js', array( 'jquery' ), ECAFE_VERSION, false );
		}

		$cgType = ! empty( $settings['cgType'] ) ? $settings['cgType'] : 'repeater';
		$output = '';
		if ( ! empty( $settings['imageSelectTabs'] ) || ! empty( $settings['imageGallery'] ) ) {
			$output .= '<div class="ec-creative-gallery-wrapper ' . esc_attr( $tabletNormalClass ) . ' ' . esc_attr( $mobileNormalClass ) . ' ' . esc_attr( $pattern ) . '"><article>';
			$index   = 1;

			$tiltclass  = '';
			$tiltrender = '';
			if ( isset( $settings['tiltEffect'] ) && $settings['tiltEffect'] === 'yes' ) {
				/*Tilt Effect Render*/
				include ECAFE_PATH . 'element/widgets/ecafe-tilt-render.php';
			}
			if ( $cgType == 'gallery' ) {
				foreach ( $settings['imageGallery'] as $index => $item ) {

					if ( isset( $imagePopup ) && $imagePopup == 'yes' ) {
						$output .= '<a href="' . esc_url( $item['url'] ) . '" data-lightbox="' . esc_attr( $uid ) . '" >';
					}

					$output .= '<img class="ec-cg-image ' . esc_attr( $tiltclass ) . '" ' . $tiltrender . ' src="' . esc_url( $item['url'] ) . '"';

					$image_alt = get_post_meta( $item['id'], '_wp_attachment_image_alt', true );
					if ( ! empty( $image_alt ) ) {
						$output .= ' alt="' . esc_attr( $image_alt ) . '"';
					}

					$output .= '>';

					if ( isset( $imagePopup ) && $imagePopup == 'yes' ) {
						$output .= '</a>';
					}
					++$index;
				}
			} else {
				foreach ( $settings['imageSelectTabs'] as $index => $item ) {
					$image_src = '';
					if ( ! empty( $item['imageSelect']['id'] ) ) {
						$image_id  = $item['imageSelect']['id'];
						$image_src = wp_get_attachment_image_src( $image_id, 'full' );
						$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
						if ( ! empty( $image_src[0] ) ) {
							$imgAlt = '';
							if ( $image_alt ) {
								$imgAlt = 'alt="' . esc_attr( $image_alt ) . '"';
							}
							if ( isset( $imagePopup ) && $imagePopup == 'yes' ) {
								$output .= '<a href="' . esc_url( $image_src[0] ) . '" data-lightbox="' . esc_attr( $uid ) . '" >';
							}

							$output .= '<img class="ec-cg-image ' . esc_attr( $tiltclass ) . '" ' . $tiltrender . ' src="' . esc_url( $image_src[0] ) . '" ' . $imgAlt . '>';

							if ( isset( $imagePopup ) && $imagePopup == 'yes' ) {
								$output .= '</a>';
							}
						}
					}

					++$index;
				}
			}

			$output .= '</article></div>';
		}
		echo wp_kses_normalize_entities( $output );
	}
}
