<?php
/**
 * Class: Image_Gallery_Widget
 * Name: Galerie d'Images
 * Slug: eac-addon-image-galerie
 *
 * Description: affiche des images dans différents modes
 * grille, mosaïque et justifiées
 *
 * @since 1.0.0
 */

namespace EACCustomWidgets\Includes\Widgets;

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

use EACCustomWidgets\Core\Eac_Load_Config;
use EACCustomWidgets\Core\Utils\Eac_Tools_Util;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Control_Media;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use Elementor\Modules\DynamicTags\Module as TagsModule;
use Elementor\Core\Breakpoints\Manager as Breakpoints_manager;
use Elementor\Plugin;
use Elementor\Utils;

class Image_Gallery_Widget extends Widget_Base {
	/** Le slider Trait */
	use \EACCustomWidgets\Includes\Traits\Slider_Trait;
	use \EACCustomWidgets\Includes\Traits\Button_Read_More_Trait;

	/**
	 * La taille de l'image par défaut
	 *
	 * @var IMAGE_SIZE
	 */
	private const IMAGE_SIZE = '300';

	/**
	 * Le nom de la clé du composant dans le fichier de configuration
	 *
	 * @var $slug
	 *
	 * @access private
	 */
	private $slug = 'image-galerie';

	/**
	 * Retrieve widget name.
	 *
	 * @access public
	 *
	 * @return string widget name.
	 */
	public function get_name(): string {
		return Eac_Load_Config::get_widget_name( $this->slug );
	}

	/**
	 * Retrieve widget title.
	 *
	 * @access public
	 *
	 * @return string widget title.
	 */
	public function get_title(): string {
		return Eac_Load_Config::get_widget_title( $this->slug );
	}

	/**
	 * Retrieve widget icon.
	 *
	 * @access public
	 *
	 * @return string widget icon.
	 */
	public function get_icon(): string {
		return Eac_Load_Config::get_widget_icon( $this->slug );
	}

	/**
	 * Affecte le composant à la catégorie définie dans plugin.php
	 *
	 * @access public
	 *
	 * @return array widget category.
	 */
	public function get_categories(): array {
		return Eac_Load_Config::get_widget_categories( $this->slug );
	}

	/**
	 * Load dependent libraries
	 *
	 * @access public
	 *
	 * @return array libraries list.
	 */
	public function get_script_depends(): array {
		return array( 'eac-image-gallery' );
	}

	/**
	 * Load dependent styles
	 * Les styles sont chargés dans le footer
	 *
	 * @access public
	 *
	 * @return array CSS list.
	 */
	public function get_style_depends(): array {
		return array( 'eac-image-gallery' );
	}

	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the widget belongs to.
	 *
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords(): array {
		return Eac_Load_Config::get_widget_keywords( $this->slug );
	}

	/**
	 * Get help widget get_custom_help_url.
	 *
	 * @access public
	 *
	 * @return string URL help center
	 */
	public function get_custom_help_url(): string {
		return Eac_Load_Config::get_widget_help_url( $this->slug );
	}

	/**
	 * has_widget_inner_wrapper
	 *
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return false;
	}

	/**
	 * is_dynamic_content
	 *
	 * @return bool
	 */
	protected function is_dynamic_content(): bool {
		return true;
	}

	/**
	 * Register widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @access protected
	 */
	protected function register_controls(): void {
		$start = is_rtl() ? 'right' : 'left';
		$end   = is_rtl() ? 'left' : 'right';
		$responsive_breakpoints = array( 'desktop' );
		$columns_device_args    = array();
		$active_breakpoints     = Plugin::$instance->breakpoints->get_active_breakpoints();

		foreach ( $active_breakpoints as $breakpoint_name => $breakpoint_instance ) {
			$responsive_breakpoints[] = $breakpoint_name;
			if ( Breakpoints_manager::BREAKPOINT_KEY_WIDESCREEN === $breakpoint_name ) {
				$columns_device_args[ $breakpoint_name ] = array( 'default' => '4' );
			} elseif ( Breakpoints_manager::BREAKPOINT_KEY_LAPTOP === $breakpoint_name ) {
				$columns_device_args[ $breakpoint_name ] = array( 'default' => '4' );
			} elseif ( Breakpoints_manager::BREAKPOINT_KEY_TABLET_EXTRA === $breakpoint_name ) {
					$columns_device_args[ $breakpoint_name ] = array( 'default' => '3' );
			} elseif ( Breakpoints_manager::BREAKPOINT_KEY_TABLET === $breakpoint_name ) {
					$columns_device_args[ $breakpoint_name ] = array( 'default' => '3' );
			} elseif ( Breakpoints_manager::BREAKPOINT_KEY_MOBILE_EXTRA === $breakpoint_name ) {
				$columns_device_args[ $breakpoint_name ] = array( 'default' => '2' );
			} elseif ( Breakpoints_manager::BREAKPOINT_KEY_MOBILE === $breakpoint_name ) {
				$columns_device_args[ $breakpoint_name ] = array( 'default' => '1' );
			}
		}

		$this->start_controls_section(
			'ig_galerie_settings',
			array(
				'label' => esc_html__( 'Gallery', 'eac-components' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

			$repeater = new Repeater();

			$repeater->add_control(
				'ig_item_title',
				array(
					'label'       => esc_html__( 'Title', 'eac-components' ),
					'type'        => Controls_Manager::TEXT,
					'dynamic'     => array( 'active' => true ),
					'ai'          => array( 'active' => false ),
					'default'     => esc_html( 'Image #' ),
					'label_block' => true,
				)
			);

			$repeater->start_controls_tabs( 'ig_item_tabs_settings' );

				$repeater->start_controls_tab(
					'ig_item_image_settings',
					array(
						'label' => esc_html__( 'Image', 'eac-components' ),
					)
				);

					$repeater->add_control(
						'ig_item_image',
						array(
							'label'   => esc_html__( 'Image', 'eac-components' ),
							'type'    => Controls_Manager::MEDIA,
							'dynamic' => array( 'active' => true ),
							'default' => array(
								'url' => Utils::get_placeholder_image_src(),
							),
						)
					);

					$repeater->add_control(
						'ig_item_alt',
						array(
							'label'       => esc_html__( 'ALT attribute', 'eac-components' ),
							'type'        => Controls_Manager::TEXT,
							'dynamic'     => array( 'active' => true ),
							'ai'          => array( 'active' => false ),
							'default'     => '',
							'description' => esc_html__( "Set 'ALT' attribut for external image (SEO)", 'eac-components' ),
							'label_block' => true,
							'render_type' => 'none',
						)
					);

				$repeater->end_controls_tab();

				$repeater->start_controls_tab(
					'ig_item_content_settings',
					array(
						'label' => esc_html__( 'Content', 'eac-components' ),
					)
				);

					$repeater->add_control(
						'ig_item_desc',
						array(
							'label'       => esc_html__( 'Description', 'eac-components' ),
							'type'        => Controls_Manager::TEXTAREA,
							'dynamic'     => array( 'active' => true ),
							'ai'          => array( 'active' => false ),
							'default'     => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
							'label_block' => true,
						)
					);

					$repeater->add_control(
						'ig_item_filter',
						array(
							'label'       => esc_html__( 'Filter labels', 'eac-components' ),
							'type'        => Controls_Manager::TEXT,
							'dynamic'     => array(
								'active'     => true,
								'categories' => array(
									TagsModule::POST_META_CATEGORY,
								),
							),
							'ai'          => array( 'active' => false ),
							'default'     => '',
							'description' => esc_html__( 'Labels separated by commas', 'eac-components' ),
							'label_block' => true,
							'render_type' => 'ui',
							'separator'   => 'before',
						)
					);

					$repeater->add_control(
						'ig_item_url',
						array(
							'label'        => esc_html( 'URL' ),
							'type'         => Controls_Manager::URL,
							'placeholder'  => esc_html__( 'Type or paste your URL', 'eac-components' ),
							'dynamic'      => array(
								'active' => true,
							),
							'default'      => array(
								'url' => '#',
							),
							'autocomplete' => true,
							'render_type'  => 'none',
						)
					);

				$repeater->end_controls_tab();

			$repeater->end_controls_tabs();

			$this->add_control(
				'ig_image_list',
				array(
					'label'       => esc_html__( 'Image list', 'eac-components' ),
					'type'        => Controls_Manager::REPEATER,
					'fields'      => $repeater->get_controls(),
					'default'     => array(
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #1' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #2' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #3' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #4' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #5' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
						array(
							'ig_item_image' => array( 'url' => Utils::get_placeholder_image_src() ),
							'ig_item_title' => esc_html( 'Image #6' ),
							'ig_item_desc'  => esc_html( 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…', ),
						),
					),
					'title_field' => '{{{ ig_item_title }}}',
					'button_text' => esc_html__( 'Add image', 'eac-components' ),
				)
			);

		$this->end_controls_section();

		$this->start_controls_section(
			'ig_layout_type_settings',
			array(
				'label' => esc_html__( 'Settings', 'eac-components' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

			$this->add_control(
				'ig_layout_content',
				array(
					'label'     => esc_html__( 'Layout', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
				)
			);

			$this->add_control(
				'ig_layout_type',
				array(
					'label'   => esc_html__( 'Mode', 'eac-components' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'masonry',
					'options' => array(
						'masonry'     => esc_html__( 'Masonry', 'eac-components' ),
						'equalHeight' => esc_html__( 'Grid', 'eac-components' ),
						'justify'     => esc_html__( 'Justify', 'eac-components' ),
						'slider'      => esc_html( 'Slider' ),
					),
					'assets' => array(
						'styles' => array(
							array(
								'name' => 'swiper-bundle',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => '===',
											'value'    => 'slider',
										),
									),
								),
							),
							array(
								'name' => 'eac-swiper',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => '===',
											'value'    => 'slider',
										),
									),
								),
							),
							array(
								'name' => 'fj-gallery',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => '===',
											'value'    => 'justify',
										),
									),
								),
							),
						),
						'scripts' => array(
							array(
								'name' => 'swiper-bundle',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => '===',
											'value'    => 'slider',
										),
									),
								),
							),
							array(
								'name' => 'isotope',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => 'in',
											'value'    => array( 'equalHeight', 'masonry' ),
										),
									),
								),
							),
							array(
								'name' => 'fit-rows',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => 'in',
											'value'    => array( 'equalHeight', 'masonry' ),
										),
									),
								),
							),
							array(
								'name' => 'fj-gallery',
								'conditions' => array(
									'terms' => array(
										array(
											'name'     => 'ig_layout_type',
											'operator' => '===',
											'value'    => 'justify',
										),
									),
								),
							),
						),
					),
				)
			);

			$this->add_responsive_control(
				'ig_columns',
				array(
					'label'        => esc_html__( 'Columns count', 'eac-components' ),
					'type'         => Controls_Manager::SELECT,
					'default'      => '3',
					'device_args'  => $columns_device_args,
					'options'      => array(
						'1' => '1',
						'2' => '2',
						'3' => '3',
						'4' => '4',
						'5' => '5',
						'6' => '6',
					),
					'prefix_class' => 'responsive%s-',
					'render_type'  => 'template',
					'condition'    => array( 'ig_layout_type!' => array( 'justify', 'slider' ) ),
				)
			);

			$this->add_control(
				'ig_enable_animation',
				array(
					'label'     => esc_html__( 'Animation', 'eac-components' ),
					'type'      => Controls_Manager::CHOOSE,
					'options'   => array(
						'yes' => array(
							'title' => esc_html__( 'Yes', 'eac-components' ),
							'icon'  => 'eicon-check',
						),
						'no'  => array(
							'title' => esc_html__( 'No', 'eac-components' ),
							'icon'  => 'eicon-ban',
						),
					),
					'default'   => 'no',
					'toggle'    => false,
					'condition' => array( 'ig_layout_type!' => array( 'justify', 'slider' ) ),
				)
			);

			$this->add_control(
				'ig_layout_type_metro',
				array(
					'label'        => esc_html__( 'Enable Metro mode', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'description'  => esc_html__( 'Is applied only to the first image', 'eac-components' ),
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => '',
					'condition'    => array( 'ig_layout_type' => 'masonry' ),
				)
			);

			$this->add_control(
				'ig_image_settings',
				array(
					'label'     => esc_html__( 'Image layout', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);

			$this->add_control(
				'ig_image_size',
				array(
					'label'   => esc_html__( 'Size', 'eac-components' ),
					'type'    => Controls_Manager::SELECT,
					'default' => 'medium',
					'options' => array(
						'thumbnail'    => esc_html__( 'Thumbnail', 'eac-components' ),
						'medium'       => esc_html__( 'Medium', 'eac-components' ),
						'medium_large' => esc_html__( 'Medium-large', 'eac-components' ),
						'large'        => esc_html__( 'Large', 'eac-components' ),
						'full'         => esc_html__( 'Original', 'eac-components' ),
					),
				)
			);

			$this->add_control(
				'ig_image_lazy',
				array(
					'label'     => esc_html( 'Lazy load' ),
					'type'      => Controls_Manager::CHOOSE,
					'options'   => array(
						'yes' => array(
							'title' => esc_html__( 'Yes', 'eac-components' ),
							'icon'  => 'eicon-check',
						),
						'no'  => array(
							'title' => esc_html__( 'No', 'eac-components' ),
							'icon'  => 'eicon-ban',
						),
					),
					'default'   => 'yes',
					'toggle'    => false,
				)
			);

			$this->add_responsive_control(
				'ig_image_height',
				array(
					'label'              => esc_html__( 'Height (px)', 'eac-components' ),
					'type'               => Controls_Manager::SLIDER,
					'size_units'         => array( 'px' ),
					'devices'            => $responsive_breakpoints,
					'default'            => array(
						'unit' => 'px',
						'size' => 250,
					),
					'tablet_default'     => array(
						'unit' => 'px',
						'size' => 200,
					),
					'mobile_default'     => array(
						'unit' => 'px',
						'size' => 150,
					),
					'range'              => array(
						'px' => array(
							'min'  => 100,
							'max'  => 500,
							'step' => 25,
						),
					),
					'frontend_available' => true,
					'condition'          => array(
						'ig_layout_type' => 'justify',
					),
				)
			);

			$this->add_control(
				'ig_enable_image_ratio',
				array(
					'label'        => esc_html__( 'Enable image ratio', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => 'yes',
					'render_type'  => 'template',
					'prefix_class' => 'image-galerie__ratio-',
					'condition'    => array( 'ig_layout_type' => array( 'equalHeight', 'fitRows' ) ),
				)
			);

			$this->add_responsive_control(
				'ig_image_new_ratio',
				array(
					'label'          => esc_html( 'Ratio' ),
					'type'           => Controls_Manager::SELECT,
					'default'        => '1 / 1',
					'tablet_default' => '1 / 1',
					'mobile_default' => '9 / 16',
					'options'        => array(
						'1 / 1'  => esc_html__( 'Default', 'eac-components' ),
						'9 / 16' => esc_html( '9-16' ),
						'4 / 3'  => esc_html( '4-3' ),
						'3 / 2'  => esc_html( '3-2' ),
						'16 / 9' => esc_html( '16-9' ),
						'21 / 9' => esc_html( '21-9' ),
					),
					'selectors'      => array( '{{WRAPPER}} .image-galerie .image-galerie__image-instance' => 'aspect-ratio:{{SIZE}};' ),
					'render_type'    => 'template',
					'condition'      => array(
						'ig_layout_type'        => array( 'equalHeight', 'fitRows' ),
						'ig_enable_image_ratio' => 'yes',
					),
				)
			);

			$this->add_responsive_control(
				'ig_image_ratio_position_y',
				array(
					'label'      => esc_html__( 'Vertical position', 'eac-components' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => array( '%' ),
					'default'    => array(
						'size' => 50,
						'unit' => '%',
					),
					'range'      => array(
						'%' => array(
							'min'  => 0,
							'max'  => 100,
							'step' => 5,
						),
					),
					'selectors'  => array( '{{WRAPPER}} .image-galerie .image-galerie__image-instance' => 'object-position: 50% {{SIZE}}%;' ),
					'condition'  => array(
						'ig_layout_type'        => array( 'equalHeight', 'fitRows' ),
						'ig_enable_image_ratio' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_content_overlay',
				array(
					'label'     => esc_html__( 'Content layout', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);

			$this->add_control(
				'ig_overlay_inout',
				array(
					'label'     => esc_html__( 'Display content', 'eac-components' ),
					'type'      => Controls_Manager::SELECT,
					'default'   => 'overlay-out',
					'options'   => array(
						'overlay-out' => esc_html__( 'Card', 'eac-components' ),
						'overlay-in'  => esc_html__( 'Overlay', 'eac-components' ),
					),
					'condition' => array( 'ig_layout_type!' => 'justify' ),
				)
			);

			$this->add_control(
				'ig_overlay_direction',
				array(
					'label'        => esc_html__( 'Overlay direction', 'eac-components' ),
					'type'         => Controls_Manager::CHOOSE,
					'options'      => array(
						'bottom' => array(
							'title' => esc_html__( 'Top', 'eac-components' ),
							'icon'  => 'eicon-v-align-top',
						),
						'left'   => array(
							'title' => is_rtl() ? esc_html__( 'Right', 'eac-components' ) : esc_html__( 'Left', 'eac-components' ),
							'icon'  => "eicon-h-align-{$start}",
						),
						'right'  => array(
							'title' => is_rtl() ? esc_html__( 'Left', 'eac-components' ) : esc_html__( 'Right', 'eac-components' ),
							'icon'  => "eicon-h-align-{$end}",
						),
						'top'    => array(
							'title' => esc_html__( 'Bottom', 'eac-components' ),
							'icon'  => 'eicon-v-align-bottom',
						),
					),
					'default'      => 'top',
					'prefix_class' => 'overlay-',
					'conditions'   => array(
						'relation' => 'or',
						'terms'    => array(
							array(
								'terms' => array(
									array(
										'name'     => 'ig_layout_type',
										'operator' => '===',
										'value'    => 'justify',
									),
								),
							),
							array(
								'terms' => array(
									array(
										'name'     => 'ig_overlay_inout',
										'operator' => '===',
										'value'    => 'overlay-in',
									),
								),
							),
						),
					),
				)
			);

			$this->add_responsive_control(
				'ig_overlay_inout_align_v',
				array(
					'label'       => esc_html__( 'Vertical alignment', 'eac-components' ),
					'type'        => Controls_Manager::CHOOSE,
					'options'     => array(
						'flex-start'    => array(
							'title' => esc_html__( 'Top', 'eac-components' ),
							'icon'  => 'eicon-justify-start-v',
						),
						'center'        => array(
							'title' => esc_html__( 'Center', 'eac-components' ),
							'icon'  => 'eicon-justify-center-v',
						),
						'flex-end'      => array(
							'title' => esc_html__( 'Bottom', 'eac-components' ),
							'icon'  => 'eicon-justify-end-v',
						),
						'space-between' => array(
							'title' => esc_html__( 'Space between', 'eac-components' ),
							'icon'  => 'eicon-justify-space-between-v',
						),
						'space-around'  => array(
							'title' => esc_html__( 'Space around', 'eac-components' ),
							'icon'  => 'eicon-justify-space-around-v',
						),
						'space-evenly'  => array(
							'title' => esc_html__( 'Space evenly', 'eac-components' ),
							'icon'  => 'eicon-justify-space-evenly-v',
						),
					),
					'default'     => 'center',
					'label_block' => true,
					'selectors'   => array(
						'{{WRAPPER}} .image-galerie__overlay' => 'justify-content: {{VALUE}};',
					),
					'conditions'  => array(
						'relation' => 'or',
						'terms'    => array(
							array(
								'name'     => 'ig_layout_type',
								'operator' => 'in',
								'value'    => array( 'equalHeight', 'slider' ),
							),
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'ig_layout_type',
										'operator' => '===',
										'value'    => 'masonry',
									),
									array(
										'name'     => 'ig_overlay_inout',
										'operator' => '!==',
										'value'    => 'overlay-out',
									),
								),
							),
						),
					),
				)
			);

			$this->add_responsive_control(
				'ig_overlay_inout_align_h',
				array(
					'label'     => esc_html__( 'Horizontal alignment', 'eac-components' ),
					'type'      => Controls_Manager::CHOOSE,
					'options'   => array(
						'start'  => array(
							'title' => is_rtl() ? esc_html__( 'Right', 'eac-components' ) : esc_html__( 'Left', 'eac-components' ),
							'icon'  => "eicon-h-align-{$start}",
						),
						'center' => array(
							'title' => esc_html__( 'Center', 'eac-components' ),
							'icon'  => 'eicon-h-align-center',
						),
						'end'    => array(
							'title' => is_rtl() ? esc_html__( 'Left', 'eac-components' ) : esc_html__( 'Right', 'eac-components' ),
							'icon'  => "eicon-h-align-{$end}",
						),
					),
					'default'   => 'center',
					'toggle'    => false,
					'selectors' => array(
						'{{WRAPPER}} .image-galerie__overlay' => 'align-items: {{VALUE}};',
						'{{WRAPPER}} .image-galerie__overlay .image-galerie__description-wrapper' => 'text-align: {{VALUE}};',
					),
					'condition' => array( 'ig_layout_type!' => 'justify' ),
				)
			);

		$this->end_controls_section();

		$this->start_controls_section(
			'ig_slider_settings',
			array(
				'label'     => 'Slider',
				'tab'       => Controls_Manager::TAB_CONTENT,
				'condition' => array( 'ig_layout_type' => 'slider' ),
			)
		);

			$this->register_slider_content_controls();

		$this->end_controls_section();

		$this->start_controls_section(
			'ig_gallery_content',
			array(
				'label' => esc_html__( 'Content', 'eac-components' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

			$this->add_control(
				'ig_filter_heading',
				array(
					'label'     => esc_html__( 'Filter', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'condition' => array( 'ig_layout_type!' => array( 'justify', 'slider' ) ),
				)
			);

			$this->add_control(
				'ig_content_filter_display',
				array(
					'label'        => esc_html__( 'Display filters', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => '',
					'condition'    => array( 'ig_layout_type!' => array( 'justify', 'slider' ) ),
				)
			);

			$this->add_control(
				'ig_content_filter_align',
				array(
					'label'     => esc_html__( 'Alignment', 'eac-components' ),
					'type'      => Controls_Manager::CHOOSE,
					'options'   => array(
						'left'   => array(
							'title' => is_rtl() ? esc_html__( 'Right', 'eac-components' ) : esc_html__( 'Left', 'eac-components' ),
							'icon'  => "eicon-h-align-{$start}",
						),
						'center' => array(
							'title' => esc_html__( 'Center', 'eac-components' ),
							'icon'  => 'eicon-h-align-center',
						),
						'right'  => array(
							'title' => is_rtl() ? esc_html__( 'Left', 'eac-components' ) : esc_html__( 'Right', 'eac-components' ),
							'icon'  => "eicon-h-align-{$end}",
						),
					),
					'default'   => 'left',
					'selectors_dictionary' => array(
						'left'  => 'start',
						'right' => 'end',
					),
					'toggle'    => false,
					'selectors' => array(
						'{{WRAPPER}} .ig-filters__wrapper, {{WRAPPER}} .ig-filters__wrapper-select' => 'text-align: {{VALUE}};',
					),
					'condition' => array(
						'ig_content_filter_display' => 'yes',
						'ig_layout_type!'           => array( 'justify', 'slider' ),
					),
				)
			);

			$this->add_control(
				'ig_post_heading',
				array(
					'label'     => esc_html__( 'Post', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);

			$this->add_control(
				'ig_content_title',
				array(
					'label'        => esc_html__( 'Title', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => 'yes',
				)
			);

			$this->add_control(
				'ig_title_tag',
				array(
					'label'     => esc_html__( 'Title tag', 'eac-components' ),
					'type'      => Controls_Manager::SELECT,
					'default'   => 'h2',
					'options'   => array(
						'h2'  => 'H2',
						'h3'  => 'H3',
						'h4'  => 'H4',
						'h5'  => 'H5',
						'h6'  => 'H6',
						'div' => 'div',
						'p'   => 'p',
					),
					'condition' => array( 'ig_content_title' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_content_description',
				array(
					'label'        => esc_html__( 'Description', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => 'yes',
				)
			);

			$this->add_control(
				'ig_links_heading',
				array(
					'label'     => esc_html__( 'Link', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);

			$this->add_control(
				'ig_content_readmore',
				array(
					'label'        => esc_html__( 'Button', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => 'yes',
				)
			);

			$this->add_control(
				'ig_content_title_link',
				array(
					'label'        => esc_html__( 'Post link on title', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => '',
					'condition'    => array( 'ig_content_title' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_image_link',
				array(
					'label'        => esc_html__( 'Post link on image', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => '',
					'condition'    => array(
						'ig_image_lightbox!' => 'yes',
						'ig_overlay_inout'   => 'overlay-out',
						'ig_layout_type!'    => 'justify',
					),
				)
			);

			$this->add_control(
				'ig_article_link',
				array(
					'label'        => esc_html__( 'Enable the link globally', 'eac-components' ),
					'description'  => esc_html__( 'The link wraps each item', 'eac-components' ),
					'type'      => Controls_Manager::CHOOSE,
					'options'   => array(
						'yes' => array(
							'title' => esc_html__( 'Yes', 'eac-components' ),
							'icon'  => 'eicon-check',
						),
						'no'  => array(
							'title' => esc_html__( 'No', 'eac-components' ),
							'icon'  => 'eicon-ban',
						),
					),
					'default'   => 'no',
					'toggle'    => false,
					'conditions' => array(
						'relation' => 'and',
						'terms'    => array(
							array(
								'relation' => 'and',
								'terms'    => array(
									array(
										'name'     => 'ig_layout_type',
										'operator' => '!==',
										'value'    => 'justify',
									),
									array(
										'name'     => 'ig_overlay_inout',
										'operator' => '!==',
										'value'    => 'overlay-in',
									),
								),
							),
							array(
								'relation' => 'or',
								'terms'    => array(
									array(
										'name'     => 'ig_content_readmore',
										'operator' => '===',
										'value'    => 'yes',
									),
									array(
										'relation' => 'and',
										'terms'    => array(
											array(
												'name'     => 'ig_content_title',
												'operator' => '===',
												'value'    => 'yes',
											),
											array(
												'name'     => 'ig_content_title_link',
												'operator' => '===',
												'value'    => 'yes',
											),
										),
									),
									array(
										'name'     => 'ig_image_link',
										'operator' => '===',
										'value'    => 'yes',
									),
								),
							),
						),
					),
				)
			);

			$this->add_control(
				'ig_image_lightbox',
				array(
					'label'        => esc_html__( 'Lightbox on image', 'eac-components' ),
					'type'         => Controls_Manager::SWITCHER,
					'label_on'     => esc_html__( 'Yes', 'eac-components' ),
					'label_off'    => esc_html__( 'No', 'eac-components' ),
					'return_value' => 'yes',
					'default'      => '',
					'condition'    => array(
						'ig_layout_type'   => array( 'masonry', 'equalHeight', 'fitRows' ),
						'ig_overlay_inout' => 'overlay-out',
						'ig_image_link!'   => 'yes',
						'ig_article_link!' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_readmore_settings',
				array(
					'label'     => esc_html__( 'Button', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array( 'ig_content_readmore' => 'yes' ),
				)
			);
			// Trait du contenu du bouton read more
			$this->register_button_more_content_controls( array( 'control_condition' => array( 'ig_content_readmore' => 'yes' ) ) );

		$this->end_controls_section();

		/**
		 * Generale Style Section
		 */
		$this->start_controls_section(
			'ig_section_general_style',
			array(
				'label' => esc_html__( 'General', 'eac-components' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

			/** Conteneur */
			$this->add_control(
				'ig_container_style',
				array(
					'label'     => esc_html__( 'Container', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
				)
			);

			$this->add_control(
				'ig_container_style_bgcolor',
				array(
					'label'     => esc_html__( 'Background color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_PRIMARY ),
					'selectors' => array( '{{WRAPPER}} .swiper .swiper-slide, {{WRAPPER}} .image-galerie' => 'background-color: {{VALUE}};' ),
				)
			);

			/** Articles */
			$this->add_control(
				'ig_items_style',
				array(
					'label'     => esc_html__( 'Post', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array( 'ig_overlay_inout' => 'overlay-out' ),
				)
			);

			$this->add_control(
				'ig_img_style',
				array(
					'label'        => esc_html__( 'Style', 'eac-components' ),
					'type'         => Controls_Manager::SELECT,
					'default'      => 'style-0',
					'options'      => array(
						'style-0'  => esc_html__( 'Default', 'eac-components' ),
						'style-1'  => 'Style 1',
						'style-2'  => 'Style 2',
						'style-3'  => 'Style 3',
						'style-4'  => 'Style 4',
						'style-5'  => 'Style 5',
						'style-8'  => 'Style 6',
						'style-10' => 'Style 7',
						'style-11' => 'Style 8',
						'style-12' => 'Style 9',
					),
					'prefix_class' => 'image-galerie_wrapper-',
				)
			);

			$this->add_responsive_control(
				'ig_items_margin',
				array(
					'label'      => esc_html__( 'Margin between images', 'eac-components' ),
					'type'       => Controls_Manager::SLIDER,
					'size_units' => array( 'px' ),
					'devices'    => $responsive_breakpoints,
					'default'    => array(
						'size' => 20,
						'unit' => 'px',
					),
					'range'      => array(
						'px' => array(
							'min'  => 0,
							'max'  => 150,
							'step' => 10,
						),
					),
					'selectors'  => array(
						'{{WRAPPER}} .image-galerie__item:not(.fj-gallery-item) .image-galerie__inner-wrapper' => 'block-size: calc(100% - {{SIZE}}px); margin: calc({{SIZE}}px / 2);',
						'(mobile) {{WRAPPER}} .image-galerie__item:not(.fj-gallery-item) .image-galerie__inner-wrapper' => 'margin-block: 0 {{SIZE}}px !important; margin-inline: 0 !important;',
					),
					'condition'  => array( 'ig_layout_type!' => 'justify' ),
				)
			);

			$this->add_control(
				'ig_items_justify_margin',
				array(
					'label'          => esc_html__( 'Margin between images', 'eac-components' ),
					'type'           => Controls_Manager::SLIDER,
					'size_units'     => array( 'px' ),
					'default'        => array(
						'size' => 20,
						'unit' => 'px',
					),
					'range'          => array(
						'px' => array(
							'min'  => 0,
							'max'  => 50,
							'step' => 1,
						),
					),
					'render_type' => 'template',
					'selectors'   => array(
						'{{WRAPPER}} .image-galerie.layout-type-justify.fj-gallery' => 'padding: calc({{SIZE}}{{UNIT}} / 2);',
					),
					'condition'   => array( 'ig_layout_type' => 'justify' ),
				)
			);

			$this->add_control(
				'ig_items_bg_color',
				array(
					'label'     => esc_html__( 'Background color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_PRIMARY ),
					'selectors' => array( '{{WRAPPER}} .image-galerie__inner-wrapper, {{WRAPPER}} .image-galerie__content.overlay-out' => 'background-color: {{VALUE}};' ),
					'condition' => array( 'ig_overlay_inout' => 'overlay-out' ),
				)
			);

			$this->add_group_control(
				Group_Control_Border::get_type(),
				array(
					'name'      => 'ig_container_style_border',
					'selector'  => '{{WRAPPER}} .image-galerie__inner-wrapper',
					'condition' => array( 'ig_img_style' => 'style-0' ),
				)
			);

			$this->add_control(
				'ig_container_style_radius',
				array(
					'label'              => esc_html__( 'Border radius', 'eac-components' ),
					'type'               => Controls_Manager::DIMENSIONS,
					'size_units'         => array( 'px', '%' ),
					'allowed_dimensions' => array( 'top', 'right', 'bottom', 'left' ),
					'default'            => array(
						'top'      => 0,
						'right'    => 0,
						'bottom'   => 0,
						'left'     => 0,
						'unit'     => 'px',
						'isLinked' => true,
					),
					'selectors'          => array(
						'{{WRAPPER}} .image-galerie__inner-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					),
					'condition'          => array( 'ig_img_style' => 'style-0' ),
				)
			);

			$this->add_group_control(
				Group_Control_Box_Shadow::get_type(),
				array(
					'name'      => 'ig_container_style_shadow',
					'label'     => esc_html__( 'Shadow', 'eac-components' ),
					'selector'  => '{{WRAPPER}} .image-galerie__inner-wrapper',
					'condition' => array( 'ig_img_style' => 'style-0' ),
				)
			);

			$this->add_control(
				'ig_filter_style',
				array(
					'label'     => esc_html__( 'Filter', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_filter_color',
				array(
					'label'     => esc_html__( 'Color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_PRIMARY ),
					'selectors' => array(
						'{{WRAPPER}} .ig-filters__wrapper .ig-filters__item, {{WRAPPER}} .ig-filters__wrapper .ig-filters__item a' => 'color: {{VALUE}};',
					),
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_group_control(
				Group_Control_Typography::get_type(),
				array(
					'name'      => 'ig_filter_typography',
					'label'     => esc_html__( 'Typography', 'eac-components' ),
					'global'    => array( 'default' => Global_Typography::TYPOGRAPHY_PRIMARY ),
					'selector'  => '{{WRAPPER}} .ig-filters__wrapper .ig-filters__item, {{WRAPPER}} .ig-filters__wrapper .ig-filters__item a',
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_filter_background',
				array(
					'label'     => esc_html__( 'Background color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_SECONDARY ),
					'selectors' => array( '{{WRAPPER}} .ig-filters__wrapper .ig-filters__item a' => 'background-color: {{VALUE}};' ),
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_filter_outline',
				array(
					'label'     => esc_html__( 'Color of selected filter', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_SECONDARY ),
					'selectors' => array(
						'{{WRAPPER}} .ig-filters__wrapper .ig-filters__item.ig-active:after' => 'border-block-end: 3px solid {{VALUE}};',
						'{{WRAPPER}} .ig-filters__wrapper .ig-filters__item.ig-active a' => 'color: {{VALUE}};',
					),
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_responsive_control(
				'ig_filter_padding',
				array(
					'label'     => esc_html__( 'Padding', 'eac-components' ),
					'type'      => Controls_Manager::DIMENSIONS,
					'selectors' => array(
						'{{WRAPPER}} .ig-filters__wrapper .ig-filters__item a' => 'padding-block: {{TOP}}{{UNIT}} {{BOTTOM}}{{UNIT}}; padding-inline: {{LEFT}}{{UNIT}}  {{RIGHT}}{{UNIT}};',
					),
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_group_control(
				Group_Control_Border::get_type(),
				array(
					'name'      => 'ig_filter_border',
					'selector'  => '{{WRAPPER}} .ig-filters__wrapper .ig-filters__item a',
					'condition' => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			$this->add_control(
				'ig_filter_radius',
				array(
					'label'              => esc_html__( 'Border radius', 'eac-components' ),
					'type'               => Controls_Manager::DIMENSIONS,
					'size_units'         => array( 'px', '%' ),
					'allowed_dimensions' => array( 'top', 'right', 'bottom', 'left' ),
					'selectors'          => array(
						'{{WRAPPER}} .ig-filters__wrapper .ig-filters__item a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					),
					'condition'          => array(
						'ig_layout_type!'           => array( 'justify', 'slider' ),
						'ig_content_filter_display' => 'yes',
					),
				)
			);

			/** Image */
			$this->add_control(
				'ig_image_section_style',
				array(
					'label'     => esc_html__( 'Image', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);

			$this->add_group_control(
				Group_Control_Border::get_type(),
				array(
					'name'     => 'ig_image_border',
					'selector' => '{{WRAPPER}} .image-galerie__image img',
				)
			);

			$this->add_control(
				'ig_image_border_radius',
				array(
					'label'              => esc_html__( 'Border radius', 'eac-components' ),
					'type'               => Controls_Manager::DIMENSIONS,
					'size_units'         => array( 'px', '%' ),
					'allowed_dimensions' => array( 'top', 'right', 'bottom', 'left' ),
					'default'            => array(
						'top'      => 0,
						'right'    => 0,
						'bottom'   => 0,
						'left'     => 0,
						'unit'     => 'px',
						'isLinked' => true,
					),
					'selectors'          => array(
						'{{WRAPPER}} .image-galerie__image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					),
				)
			);

			/** Titre */
			$this->add_control(
				'ig_titre_section_style',
				array(
					'label'     => esc_html__( 'Title', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array( 'ig_content_title' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_titre_color',
				array(
					'label'     => esc_html__( 'Color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_PRIMARY ),
					'default'   => '#919CA7',
					'selectors' => array(
						'{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__titre-wrapper,
						{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__titre' => 'color: {{VALUE}};',
					),
					'condition' => array( 'ig_content_title' => 'yes' ),
				)
			);

			$this->add_group_control(
				Group_Control_Typography::get_type(),
				array(
					'name'      => 'ig_titre_typography',
					'label'     => esc_html__( 'Typography', 'eac-components' ),
					'global'    => array( 'default' => Global_Typography::TYPOGRAPHY_PRIMARY ),
					'selector'  => '{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__titre-wrapper,
									{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__titre',
					'condition' => array( 'ig_content_title' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_texte_section_style',
				array(
					'label'     => esc_html__( 'Description', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array( 'ig_content_description' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_texte_color',
				array(
					'label'     => esc_html__( 'Color', 'eac-components' ),
					'type'      => Controls_Manager::COLOR,
					'global'    => array( 'default' => Global_Colors::COLOR_TEXT ),
					'selectors' => array( '{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__description-wrapper' => 'color: {{VALUE}};' ),
					'condition' => array( 'ig_content_description' => 'yes' ),
				)
			);

			$this->add_group_control(
				Group_Control_Typography::get_type(),
				array(
					'name'      => 'ig_texte_typography',
					'label'     => esc_html__( 'Typography', 'eac-components' ),
					'global'    => array( 'default' => Global_Typography::TYPOGRAPHY_TEXT ),
					'selector'  => '{{WRAPPER}} .image-galerie__item .image-galerie__content .image-galerie__overlay .image-galerie__description-wrapper',
					'condition' => array( 'ig_content_description' => 'yes' ),
				)
			);

			$this->add_control(
				'ig_readmore_style',
				array(
					'label'     => esc_html__( 'Button', 'eac-components' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => array( 'ig_content_readmore' => 'yes' ),
				)
			);
			// Trait du contenu du bouton read more
			$this->register_button_more_style_controls( array( 'control_condition' => array( 'ig_content_readmore' => 'yes' ) ) );

		$this->end_controls_section();

		$this->start_controls_section(
			'ig_slider_section_style',
			array(
				'label'      => esc_html__( 'Slider controls', 'eac-components' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => array(
					'relation' => 'or',
					'terms'    => array(
						array(
							'terms' => array(
								array(
									'name'     => 'ig_layout_type',
									'operator' => '===',
									'value'    => 'slider',
								),
								array(
									'name'     => 'slider_navigation',
									'operator' => '===',
									'value'    => 'yes',
								),
							),
						),
						array(
							'terms' => array(
								array(
									'name'     => 'ig_layout_type',
									'operator' => '===',
									'value'    => 'slider',
								),
								array(
									'name'     => 'slider_pagination',
									'operator' => '===',
									'value'    => 'yes',
								),
							),
						),
					),
				),
			)
		);

			/** Slider styles du trait */
			$this->register_slider_style_controls();

		$this->end_controls_section();
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @access protected
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();
		if ( ! $settings['ig_image_list'] || empty( $settings['ig_image_list'] ) ) {
			return;
		}

		$id             = 'image_galerie_' . $this->get_id();
		$slider_id      = 'slider_image_galerie_' . $this->get_id();
		$has_swiper     = 'slider' === $settings['ig_layout_type'] ? true : false;
		$has_filters    = ! $has_swiper && 'yes' === $settings['ig_content_filter_display'] ? true : false;
		$has_navigation = $has_swiper && 'yes' === $settings['slider_navigation'] ? true : false;
		$has_pagination = $has_swiper && 'yes' === $settings['slider_pagination'] ? true : false;
		$has_scrollbar  = $has_swiper && 'yes' === $settings['slider_scrollbar'] ? true : false;
		$layout_type    = 'equalHeight' === $settings['ig_layout_type'] ? 'fitRows' : $settings['ig_layout_type'];

		if ( ! $has_swiper ) {
			if ( 'justify' === $layout_type ) {
				$class = 'image-galerie layout-type-justify fj-gallery';
			} else {
				$class = sprintf( 'image-galerie layout-type-%s', $layout_type );
			}
		} else {
			$class = 'image-galerie swiper-wrapper';
		}

		$this->add_render_attribute( 'gallery_instance', 'class', esc_attr( $class ) );
		$this->add_render_attribute( 'gallery_instance', 'id', esc_attr( $id ) );
		if ( $has_filters ) {
			$this->add_render_attribute( 'gallery_instance', 'role', 'region' );
			$this->add_render_attribute( 'gallery_instance', 'aria-relevant', 'additions removals' );
			$this->add_render_attribute( 'gallery_instance', 'aria-live', 'polite' );
			$this->add_render_attribute( 'gallery_instance', 'aria-atomic', 'false' );
		}
		$this->add_render_attribute( 'gallery_instance', 'data-settings', $this->get_settings_json() );

		if ( $has_swiper ) { ?>
			<div id="<?php echo esc_attr( $slider_id ); ?>" class='eac-image-galerie swiper'>
		<?php } else { ?>
			<div class='eac-image-galerie'>
		<?php }
		if ( $has_filters ) {
			$this->render_image_gallery_filter( $id );
		}
		?>
			<div <?php $this->print_render_attribute_string( 'gallery_instance' ); ?>>
				<?php if ( ! $has_swiper && 'justify' !== $layout_type ) { ?>
					<div class='image-galerie__item-sizer'></div>
				<?php }
				$this->render_gallery(); ?>
			</div>
			<?php if ( $has_navigation ) { ?>
				<div class='swiper-button-next'></div>
				<div class='swiper-button-prev'></div>
			<?php } ?>
			<?php if ( $has_scrollbar ) { ?>
				<div class='swiper-scrollbar'></div>
			<?php } ?>
			<?php if ( $has_pagination ) { ?>
				<div class='swiper-pagination-bullet'></div>
			<?php } ?>
			<div class='eac-skip-grid' tabindex='0'>
				<span class='visually-hidden'><?php esc_html_e( 'Exit grid', 'eac-components' ); ?></span>
			</div>
		</div>
		<?php
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @access protected
	 */
	protected function render_gallery(): void {
		$settings = $this->get_settings_for_display();

		/** ID de l'article */
		$unique_id = uniqid();

		$layout_type = $settings['ig_layout_type'];

		/** Le swiper est actif */
		$has_swiper = 'slider' === $layout_type ? true : false;

		$title_tag = ! empty( $settings['ig_title_tag'] ) ? Utils::validate_html_tag( $settings['ig_title_tag'] ) : 'div';

		/** L'image */
		$has_image = true;
		$lazy_load = 'yes' === $settings['ig_image_lazy'] ? 'lazy' : 'eager';

		/** Visionneuse active mais pas avec le slider */
		$has_image_lightbox = ! $has_swiper && isset( $settings['ig_image_lightbox'] ) && 'yes' === $settings['ig_image_lightbox'] ? true : false;

		/** Lien sur l'image */
		$has_image_link = ! $has_image_lightbox && 'yes' === $settings['ig_image_link'] ? true : false;

		/** Le titre */
		$has_title      = 'yes' === $settings['ig_content_title'] ? true : false;
		$has_title_link = $has_title && 'yes' === $settings['ig_content_title_link'] ? true : false;

		/** La description */
		$has_description = 'yes' === $settings['ig_content_description'] ? true : false;

		/** Le bouton read more */
		$has_button_readmore = 'yes' === $settings['ig_content_readmore'] ? true : false;

		/** Le lien est global */
		$has_global_link = isset( $settings['ig_article_link'] ) && 'yes' === $settings['ig_article_link'] ? true : false;

		/** Filtres */
		$has_filters = ! $has_swiper && 'yes' === $settings['ig_content_filter_display'] ? true : false;

		/** Overlay layout == justify, overlay interne par défaut */
		if ( 'justify' === $layout_type ) {
			$overlay = 'overlay-in';
		} elseif ( ! isset( $settings['ig_overlay_inout'] ) ) {
			$overlay = '';
		} else {
			$overlay = $settings['ig_overlay_inout'];
		}

		/** La classe du titre/texte/boutons */
		$this->add_render_attribute( 'gallery_content', 'class', esc_attr( 'image-galerie__content ' . $overlay ) );
		if ( 'overlay-in' === $overlay ) {
			$this->add_render_attribute( 'gallery_content', 'tabindex', '0' ); // Accessibilité
		}

		/** Boucle sur tous les items */
		ob_start( array( '\EACCustomWidgets\Core\Utils\Eac_Tools_Util', 'compress_html_full_output' ), 0, PHP_OUTPUT_HANDLER_REMOVABLE );
		foreach ( $settings['ig_image_list'] as $index => $item ) {
			$attachment = array();
			/** Le titre de l'item */
			$item_title = $settings['ig_image_list'][ $index ]['ig_item_title'];

			/** Il y a une image */
			if ( $has_image && ! empty( $item['ig_item_image']['url'] ) ) {
				if ( ! empty( $item['ig_item_image']['id'] ) ) {
					$attachment = Eac_Tools_Util::wp_get_attachment_data( intval( $item['ig_item_image']['id'] ), $settings['ig_image_size'] );
				} else { // Image avec Url externe
					$attachment['src']    = $item['ig_item_image']['url'];
					$attachment['width']  = self::IMAGE_SIZE;
					$attachment['height'] = self::IMAGE_SIZE;
					$attachment['alt']    = ! empty( $item['ig_item_alt'] ) ? 'Image ' . esc_html( $item['ig_item_alt'] ) : 'Image ' . esc_html( $item_title );
				}
			}

			if ( empty( $attachment ) ) {
				continue;
			}

			/** Le titre, la description sont éditables en ligne */
			$image_list_titre_key = $this->get_repeater_setting_key( 'ig_item_title', 'ig_image_list', $index );
			$image_list_desc_key  = $this->get_repeater_setting_key( 'ig_item_desc', 'ig_image_list', $index );
			$this->add_render_attribute( $image_list_titre_key, 'class', 'image-galerie__titre-wrapper' );
			$this->add_render_attribute( $image_list_desc_key, 'class', 'image-galerie__description-wrapper global__line-height' );
			$this->add_inline_editing_attributes( $image_list_titre_key, 'none' );
			$this->add_inline_editing_attributes( $image_list_desc_key, 'advanced' );

			/** Les filtres */
			if ( $has_filters && ! empty( $item['ig_item_filter'] ) ) {
				$sanized = array();
				$filters = explode( ',', $item['ig_item_filter'] );
				foreach ( $filters as $filter ) {
					$sanized[] = sanitize_title( mb_strtolower( $filter, 'UTF-8' ) );
				}
				$this->add_render_attribute( 'gallery_item', 'class', array( 'image-galerie__item', implode( ' ', $sanized ) ) );
			} elseif ( ! $has_filters || empty( $item['ig_item_filter'] ) ) {
				if ( 'justify' === $layout_type ) {
					$this->add_render_attribute( 'gallery_item', 'class', 'image-galerie__item fj-gallery-item' );
				} elseif ( 'slider' === $layout_type ) {
					$this->add_render_attribute( 'gallery_item', 'class', 'image-galerie__item swiper-slide' );
					$this->add_render_attribute( 'gallery_item', 'data-swiper-slide-index', $index );
				} else {
					$this->add_render_attribute( 'gallery_item', 'class', 'image-galerie__item' );
				}
			}

			/** Un lien avec l'item */
			$item_link = ! empty( $item['ig_item_url']['url'] ) && '#' !== $item['ig_item_url']['url'] ? $item['ig_item_url']['url'] : false;
			if ( $item_link ) {
				$this->add_link_attributes( 'title_link', $item['ig_item_url'] );
				if ( $item['ig_item_url']['is_external'] ) {
					$this->add_render_attribute( 'title_link', 'rel', 'noopener noreferrer' );
				}
				if ( $has_global_link ) {
					$this->add_render_attribute( 'title_link', 'class', 'eac-accessible-link card-link' );
				} else {
					$this->add_render_attribute( 'title_link', 'class', 'eac-accessible-link' );
				}
			}
			?>
			<article <?php $this->print_render_attribute_string( 'gallery_item' ); ?>>
				<div class='image-galerie__inner-wrapper'>
					<?php
					$this->add_render_attribute(
						'gallery_image',
						array(
							'class'  => 'eac-accessible-img image-galerie__image-instance',
							'src'    => esc_url( $attachment['src'] ),
							'width'  => esc_attr( $attachment['width'] ),
							'height' => esc_attr( $attachment['height'] ),
							'alt'    => '',
						)
					);
					if ( isset( $attachment['srcset'] ) ) {
						$this->add_render_attribute( 'gallery_image', 'srcset', esc_attr( $attachment['srcset'] ) );
						$this->add_render_attribute( 'gallery_image', 'sizes', esc_attr( $attachment['srcsize'] ) );
					}
					if ( 'eager' === $lazy_load ) {
						$this->add_render_attribute( 'gallery_image', 'loading', $lazy_load );
					}

					if ( 'overlay-out' === $overlay ) {
						if ( $has_image_link && $item_link ) {
							if ( $has_global_link ) {
								$this->add_render_attribute( 'image_link', 'class', 'eac-accessible-link card-link' );
							} else {
								$this->add_render_attribute( 'image_link', 'class', 'eac-accessible-link' );
							}
							$this->add_render_attribute( 'image_link', 'href', esc_url( $item_link ) );
							$this->add_render_attribute( 'image_link', 'aria-label', sprintf( '%1$s - %2$s', esc_attr__( 'Read post', 'eac-components' ), esc_attr( $item_title ) ) );
						} elseif ( $has_image_lightbox ) {
							$this->add_render_attribute( 'image_link', 'class', 'eac-accessible-link' );
							$this->add_render_attribute( 'image_link', 'href', esc_url( $attachment['src'] ) );
							$this->add_render_attribute( 'image_link', 'data-elementor-open-lightbox', 'no' );
							$this->add_render_attribute( 'image_link', 'data-fancybox', esc_attr( $unique_id ) );
							$this->add_render_attribute( 'image_link', 'data-caption', esc_attr( ucfirst( $item_title ) ) );
							$this->add_render_attribute( 'image_link', 'aria-haspopup', 'dialog' );
							$this->add_render_attribute( 'image_link', 'aria-expanded', 'false' );
							$this->add_render_attribute( 'image_link', 'aria-label', sprintf( '%1$s - %2$s', esc_attr__( 'View image', 'eac-components' ), esc_attr( ucfirst( $item_title ) ) ) );
						}
					} ?>
					<!--Affiche l'image-->
					<div class='image-galerie__image'>
						<?php if ( 'overlay-out' === $overlay && ( ( $has_image_link && $item_link ) || $has_image_lightbox ) ) { ?>
							<a <?php $this->print_render_attribute_string( 'image_link' ); ?>>
						<?php } ?>
							<img <?php $this->print_render_attribute_string( 'gallery_image' ); ?>>
						<?php if ( 'overlay-out' === $overlay && ( ( $has_image_link && $item_link ) || $has_image_lightbox ) ) { ?>
							</a>
						<?php } ?>
					</div>

					<?php if ( $has_title || $has_description || $has_button_readmore ) { ?>
						<div <?php $this->print_render_attribute_string( 'gallery_content' ); ?>>
							<div class='image-galerie__overlay'>
								<?php if ( $has_title ) {
									/** Formate le titre */
									$title_with_tag = sprintf( '<%1$s class="image-galerie__titre global__line-height">%2$s</%1$s>', esc_attr( $title_tag ), esc_html( ucfirst( $item_title ) ) );
									if ( $item_link && $has_title_link ) { ?>
										<a <?php $this->print_render_attribute_string( 'title_link' ); ?>>
											<div <?php $this->print_render_attribute_string( $image_list_titre_key ); ?>>
												<?php echo $title_with_tag; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
											</div>
										</a>
									<?php } else { ?>
										<div <?php $this->print_render_attribute_string( $image_list_titre_key ); ?>>
											<?php echo $title_with_tag; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
										</div>
									<?php }
								}

								if ( $has_description && ! empty( $item['ig_item_desc'] ) ) { ?>
									<div <?php $this->print_render_attribute_string( $image_list_desc_key ); ?>>
										<span dir='ltr'><?php echo nl2br( wp_kses_post( $item['ig_item_desc'] ) ); ?></span>
									</div>
								<?php }

								if ( $item_link && $has_button_readmore ) { ?>
									<div class='buttons-wrapper'>
										<?php $this->render_button_more(
											array(
												'permalink'     => $item_link,
												'item_title'    => $item_title,
												'global_link'   => $has_global_link,
												'default_label' => esc_html__( 'Read more', 'eac-components' ),
											)
										); ?>
									</div>
								<?php } ?>
							</div> <!-- galerie__overlay -->
						</div> <!-- gallery_content -->
					<?php } ?>		
				</div> <!-- image-galerie__inner-wrapper -->
			</article> <!-- gallery_item -->
			<?php
			$this->remove_render_attribute( 'gallery_image' );
			$this->remove_render_attribute( 'image_link' );
			$this->remove_render_attribute( 'title_link' );
			$this->remove_render_attribute( 'gallery_item' );
		}
		ob_end_flush();
	}

	/**
	 * get_settings_json()
	 *
	 * Retrieve fields values to pass at the widget container
	 * Convert on JSON format
	 *
	 * @uses      wp_json_encode()
	 * @return    JSON oject
	 * @access    protected
	 */
	protected function get_settings_json(): string {
		$settings    = $this->get_settings_for_display();
		$layout_type = 'equalHeight' === $settings['ig_layout_type'] ? 'fitRows' : $settings['ig_layout_type'];

		if ( 'justify' === $layout_type ) {
			$overlay = 'overlay-in';
		} else {
			$overlay = $settings['ig_overlay_inout'];
		}

		$effect = $settings['slider_effect'];
		if ( in_array( $effect, array( 'fade', 'creative' ), true ) ) {
			$nb_images = 1;
		} elseif ( isset( $settings['slider_images_centered'] ) && 'yes' === $settings['slider_images_centered'] ) {
			$nb_images = 2;
		} elseif ( empty( $settings['slider_images_number'] ) ) {
			$nb_images = 3;
		} elseif ( 0 === absint( $settings['slider_images_number'] ) ) {
			$nb_images = 'auto';
			$effect    = 'slide';
		} else {
			$nb_images = absint( $settings['slider_images_number'] );
		}

		$module_settings = array(
			'data_id'                  => '#image_galerie_' . esc_attr( $this->get_id() ),
			'data_layout'              => $layout_type,
			'data_overlay'             => $overlay,
			'data_gutter'              => 'justify' === $layout_type && ! empty( $settings['ig_items_justify_margin']['size'] ) ? absint( $settings['ig_items_justify_margin']['size'] ) : 10,
			'data_rowheight'           => 'justify' === $layout_type && ! empty( $settings['ig_image_height']['size'] ) ? absint( $settings['ig_image_height']['size'] ) : 200,
			'data_fancybox'            => 'yes' === $settings['ig_image_lightbox'] ? true : false,
			'data_metro'               => 'yes' === $settings['ig_layout_type_metro'] ? true : false,
			'data_filtre'              => 'yes' === $settings['ig_content_filter_display'] ? true : false,
			'data_sw_swiper'           => 'slider' === $layout_type ? true : false,
			'data_sw_autoplay'         => 'yes' === $settings['slider_autoplay'] ? true : false,
			'data_sw_loop'             => 'yes' === $settings['slider_loop'] ? true : false,
			'data_sw_delay'            => ! empty( $settings['slider_delay'] ) ? absint( $settings['slider_delay'] ) : 2000,
			'data_sw_imgs'             => $nb_images,
			'data_sw_centered'         => 'yes' === $settings['slider_images_centered'] ? true : false,
			'data_sw_dir'              => 'horizontal',
			'data_sw_rtl'              => 'right' === $settings['slider_rtl'] ? true : false,
			'data_sw_effect'           => $effect,
			'data_sw_free'             => true,
			'data_sw_pagination_click' => 'yes' === $settings['slider_pagination'] && 'yes' === $settings['slider_pagination_click'] ? true : false,
			'data_sw_scroll'           => 'yes' === $settings['slider_scrollbar'] ? true : false,
			'data_animate'             => 'yes' === $settings['ig_enable_animation'] ? true : false,
			'data_lazy'                => 'yes' === $settings['ig_image_lazy'] ? true : false,
		);

		return wp_json_encode( $module_settings );
	}

	/**
	 * render_image_gallery_filter
	 * Description: Retourne les filtres formaté en HTML en ligne
	 * ou sous forme de liste pour les media query
	 *
	 * @param string $wrapper_id
	 *
	 * @return void
	 */
	protected function render_image_gallery_filter( $wrapper_id ): void {
		$settings     = $this->get_settings_for_display();
		$id           = $this->get_id();
		$filters_name = array();
		$html         = '';

		foreach ( $settings['ig_image_list'] as $item ) {
			if ( ! empty( $item['ig_item_image']['url'] ) && ! empty( $item['ig_item_filter'] ) ) {
				$current_filters = explode( ',', $item['ig_item_filter'] );
				foreach ( $current_filters as $current_filter ) {
					$filters_name[ sanitize_title( mb_strtolower( $current_filter, 'UTF-8' ) ) ] = sanitize_title( mb_strtolower( $current_filter, 'UTF-8' ) );
				}
			}
		}

		// Des filtres
		if ( ! empty( $filters_name ) ) {
			ksort( $filters_name, SORT_FLAG_CASE | SORT_NATURAL );

			$html .= "<div class='ig-filters__wrapper'>";
			$html .= "<div class='ig-filters__item ig-active'><a href='#' class='eac-accessible-link' data-filter='*' role='button' aria-pressed='true' aria-controls='" . esc_attr( $wrapper_id ) . "' aria-label='" . esc_html__( 'Filter gallery by', 'eac-components' ) . ' ' . esc_html__( 'All', 'eac-components' ) . "'>" . esc_html__( 'All', 'eac-components' ) . '</a></div>';
			foreach ( $filters_name as $filter_name ) {
				$html .= "<div class='ig-filters__item'><a href='#' class='eac-accessible-link' data-filter='." . sanitize_title( $filter_name ) . "' role='button' aria-pressed='false' aria-controls='" . esc_attr( $wrapper_id ) . "' aria-label='" . esc_html__( 'Filter gallery by', 'eac-components' ) . ' ' . ucfirst( $filter_name ) . "'>" . ucfirst( $filter_name ) . '</a></div>';
			}
			$html .= '</div>';

			// Filtre dans une liste pour les media query
			$html     .= "<div class='ig-filters__wrapper-select'>";
			$html     .= "<label id='label_" . esc_attr( $id ) . "' class='visually-hidden' for='listbox_" . esc_attr( $id ) . "'>" . esc_html__( 'Custom filters', 'eac-components' ) . '</label>';
			$html     .= "<select id='listbox_" . esc_attr( $id ) . "' class='ig-filters__select' aria-labelledby='label_" . esc_attr( $id ) . "'>";
				$html .= "<option value='*' selected>" . esc_html__( 'All', 'eac-components' ) . '</option>';
			foreach ( $filters_name as $filter_name ) {
				$html .= "<option value='." . sanitize_title( $filter_name ) . "'>" . ucfirst( $filter_name ) . '</option>';
			}
			$html .= '</select>';
			$html .= '</div>';
		}
		echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
	}

	protected function content_template(): void {}
}
