<?php
if (!defined('ABSPATH')) {
	exit;
}

use \Elementor\Controls_Manager;
use \Elementor\Repeater;

/**
 * Sina_Ext_Pro_Grid_Animation Class
 *
 * @since 1.10.0
 */
class Sina_Ext_Pro_Grid_Animation{
	/**
	 * Instance
	 *
	 * @since 1.10.0
	 * @var Sina_Ext_Pro_Grid_Animation The single instance of the class.
	 */
	private static $_instance = null;

	/**
	 * Instance
	 *
	 * Ensures only one instance of the class is loaded or can be loaded.
	 *
	 * @since 1.10.0
	 * @return Sina_Ext_Pro_Grid_Animation An Instance of the class.
	 */
	public static function instance() {
		if ( is_null( self::$_instance ) ) {
			self::$_instance = new self();
		}
		return self::$_instance;
	}

	public function __construct() {
		add_action( 'elementor/element/section/section_advanced/after_section_end', [$this, 'register_controls'] );
		add_action( 'elementor/element/container/section_layout/after_section_end', [$this, 'register_controls'] );
		add_action( 'elementor/frontend/section/before_render', [$this, 'render_content'], 10, 2 );
		add_action( 'elementor/frontend/container/before_render', [$this, 'render_content'], 10, 2 );
		add_action( 'elementor/section/print_template', [$this, 'print_template'], 10, 2 );
		add_action( 'elementor/container/print_template', [$this, 'print_template'], 10, 2 );
	}

	public function register_controls($elems) {
		$elems->start_controls_section(
			'sina_grid_animation',
			[
				'label' => esc_html__('Sina Grid Animation', 'sina-ext-pro'),
				'tab' => Controls_Manager::TAB_ADVANCED,
			]
		);

		$elems->add_control(
			'sina_is_grid_animation',
			[
				'label' => esc_html__( 'Animation Enable', 'sina-ext-pro' ),
				'type' => Controls_Manager::SWITCHER,
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'sina_grid_animation_timing_function',
			[
				'label' => esc_html__( 'Effects', 'sina-ext-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'linear' => esc_html__( 'Linear', 'sina-ext-pro' ),
					'ease' => esc_html__( 'Ease', 'sina-ext-pro' ),
					'ease-in' => esc_html__( 'Ease-in', 'sina-ext-pro' ),
					'ease-out' => esc_html__( 'Ease-out', 'sina-ext-pro' ),
					'ease-in-out' => esc_html__( 'Ease-in-out', 'sina-ext-pro' ),
				],
				'default' => 'ease-in-out',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'animation-timing-function: {{VALUE}};',
				],
			]
		);
		$repeater->add_control(
			'sina_grid_animation_direction',
			[
				'label' => esc_html__( 'Direction', 'sina-ext-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'normal' => esc_html__( 'Normal', 'sina-ext-pro' ),
					'reverse' => esc_html__( 'Reverse', 'sina-ext-pro' ),
					'alternate' => esc_html__( 'Alternate', 'sina-ext-pro' ),
				],
				'default' => 'normal',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'animation-direction: {{VALUE}};',
				],
			]
		);
		$repeater->add_control(
			'sina_grid_animation_iteration',
			[
				'label' => esc_html__( 'Loop', 'sina-ext-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'infinite' => esc_html__( 'Infinite', 'sina-ext-pro' ),
					'1' => esc_html__( '1', 'sina-ext-pro' ),
					'2' => esc_html__( '2', 'sina-ext-pro' ),
					'3' => esc_html__( '3', 'sina-ext-pro' ),
					'4' => esc_html__( '4', 'sina-ext-pro' ),
					'5' => esc_html__( '5', 'sina-ext-pro' ),
					'6' => esc_html__( '6', 'sina-ext-pro' ),
					'7' => esc_html__( '7', 'sina-ext-pro' ),
					'8' => esc_html__( '8', 'sina-ext-pro' ),
					'9' => esc_html__( '9', 'sina-ext-pro' ),
				],
				'default' => 'infinite',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'animation-iteration-count: {{VALUE}};',
				],
			]
		);
		$repeater->add_control(
			'sina_grid_animation_duration',
			[
				'label' => esc_html__( 'Duration (MS)', 'sina-ext-pro' ),
				'type' => Controls_Manager::NUMBER,
				'step' => 1000,
				'min' => 5000,
				'max' => 99999,
				'default' => 20000,
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'animation-duration: {{VALUE}}ms;',
				],
			]
		);
		$repeater->add_control(
			'sina_grid_animation_delay',
			[
				'label' => esc_html__( 'Delay (MS)', 'sina-ext-pro' ),
				'type' => Controls_Manager::NUMBER,
				'step' => 100,
				'max' => 99999,
				'default' => 10,
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'animation-delay: {{VALUE}}ms;',
				],
			]
		);

		$repeater->add_responsive_control(
			'sina_grid_animation_index',
			[
				'label' => esc_html__( 'Z-Index', 'sina-ext-pro' ),
				'type' => Controls_Manager::NUMBER,
				'default' => '9',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}}' => 'z-index: {{SIZE}};',
				],
			]
		);

		$repeater->start_controls_tabs( 'sina_grid_anim_tabs' );

		$repeater->start_controls_tab(
			'sina_grid_animation_grid',
			[
				'label' => esc_html__( 'Grid', 'sina-ext-pro' ),
			]
		);

		$repeater->add_control(
			'sina_grid_animation_grid_color',
			[
				'label' => esc_html__( 'Color', 'sina-ext-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#0000FF1A',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}}' => 'background: {{VALUE}};',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_grid_left',
			[
				'label' => esc_html__( 'Left (%)', 'sina-ext-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range' => [
					'%' => [
						'max' => 100,
						'min' => -50,
					],
				],
				'default' => [
					'unit' => '%',
					'size' => '50',
				],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}}' => 'left: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_grid_width',
			[
				'label' => esc_html__( 'Width (PX)', 'sina-ext-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'default' => [
					'unit' => 'px',
					'size' => '1',
				],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}}' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'sina_grid_animation_clip',
			[
				'label' => esc_html__( 'Clip', 'sina-ext-pro' ),
			]
		);

		$repeater->add_control(
			'sina_grid_animation_clip_color',
			[
				'label' => esc_html__( 'Color', 'sina-ext-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#0000FF80',
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'background: {{VALUE}};',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_clip_left',
			[
				'label' => esc_html__( 'Left (PX)', 'sina-ext-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'max' => 100,
						'min' => -50,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => '-1',
				],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'transform: translateX({{SIZE}}{{UNIT}});',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_clip_height',
			[
				'label' => esc_html__( 'Height (PX)', 'sina-ext-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'default' => [
					'unit' => 'px',
					'size' => '20',
				],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_clip_width',
			[
				'label' => esc_html__( 'Width (PX)', 'sina-ext-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'default' => [
					'unit' => 'px',
					'size' => '3',
				],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$repeater->add_responsive_control(
			'sina_grid_animation_clip_radius',
			[
				'label' => esc_html__( 'Radius', 'sina-ext-pro' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors' => [
					'.sina-pro-animated-grid{{CURRENT_ITEM}} .sina-pro-animated-grid-clip' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$elems->add_control(
			'sina_grid_animation_clips',
			[
				'label' => esc_html__( 'Add grid', 'sina-ext-pro' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'sina_grid_animation_grid_color' => '#0000FF1A',
						'sina_grid_animation_clip_color' => '#0000FF80',
						'sina_grid_animation_duration' => '25000',
						'sina_grid_animation_delay' => '50',
						'sina_grid_animation_grid_left' => [
							'unit' => '%',
							'size' => '25',
						],
					],
					[
						'sina_grid_animation_grid_color' => '#FF006A1A',
						'sina_grid_animation_clip_color' => '#FF008580',
						'sina_grid_animation_duration' => '20000',
						'sina_grid_animation_delay' => '100',
						'sina_grid_animation_grid_left' => [
							'unit' => '%',
							'size' => '50',
						],
					],
					[
						'sina_grid_animation_grid_color' => '#00FF101A',
						'sina_grid_animation_clip_color' => '#00FF0980',
						'sina_grid_animation_duration' => '30000',
						'sina_grid_animation_delay' => '10',
						'sina_grid_animation_grid_left' => [
							'unit' => '%',
							'size' => '75',
						],
					],
				],
				'prevent_empty' => true,
				'condition' => [
					'sina_is_grid_animation' => 'yes',
				],
				'title_field' => '{{{ sina_grid_animation_clip_color }}}',
			]
		);

		$elems->add_control(
			'sina_grid_animation_apply',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw' => '<div class="elementor-update-preview" style="background: rgba(0,0,0,0);margin-left: 0;margin-right: 0;"><div class="elementor-update-preview-title">Changes Apply?</div><div class="elementor-update-preview-button-wrapper"><button class="elementor-update-preview-button elementor-button elementor-button-success">Yes</button></div></div>',
			]
		);

		$elems->end_controls_section();
	}

	public function render_content( $elems ) {
		$data = $elems->get_settings_for_display();

		if ( 'yes' == $data['sina_is_grid_animation'] ) {
			wp_enqueue_style( 'sina-pro-extenders', SINA_EXT_PRO_URL .'assets/css/sina-pro-extenders.min.css', [], SINA_EXT_PRO_VERSION );
			foreach ($data['sina_grid_animation_clips'] as $clip):
			?>
			<div class="sina-pro-animated-grid elementor-repeater-item-<?php echo esc_attr($clip['_id']); ?>">
				<div class="sina-pro-animated-grid-clip"></div>
			</div>
			<?php
			endforeach;
		}

	}

	public function print_template( $template, $elems ) {
		$old_template = $template;
		ob_start();
		?>
		<#
			if ( 'yes' == settings.sina_is_grid_animation ) {
				_.each(settings.sina_grid_animation_clips, function (clip, index) {
				#>
				<div class="sina-pro-animated-grid elementor-repeater-item-{{{clip._id}}}">
					<div class="sina-pro-animated-grid-clip"></div>
				</div>
				<#
				});
			}
		#>
		<?php
		$content = ob_get_contents();
		ob_end_clean();

		return $content . $old_template;
	}

}

Sina_Ext_Pro_Grid_Animation::instance();