<?php

namespace Elementor;

class ElementsKit_Widget_Effect_Controls{

	public function __construct() {
		add_action('elementor/element/common/_section_style/after_section_end', [ $this, 'register_controls' ], 5, 2);
	}

	private function get_multi_parallax_assets() {
		return [
			'styles' => [
				[
					'name' => 'elementskit-parallax',
					'conditions' => [
						'terms' => [
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'css',
							],
						],
					],
				],
			],
			'scripts' => [
				[
					'name' => 'elementskit-parallax-frontend',
					'conditions' => [
						'relation' => 'or',
						'terms' => [
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'tilt',
							],
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'onscroll',
							],
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'mousemove',
							],
						],
					],
				],
				[
					'name' => 'elementskit-parallax-admin',
					'conditions' => [
						'relation' => 'or',
						'terms' => [
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'tilt',
							],
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'onscroll',
							],
							[
								'name' => 'ekit_we_effect_on',
								'operator' => '===',
								'value' => 'mousemove',
							],
						],
					],
				],
			],
		];
	}

	public function register_controls($control, $args) {
		$wrapper_selector = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ) ? '{{WRAPPER}}' : '{{WRAPPER}} .elementor-widget-container';

		$control->start_controls_section(
			'ekit_widget_effects',
			[
				'label' => esc_html__('ElementsKit Effects', 'elementskit'),
				'tab' => Controls_Manager::TAB_ADVANCED,
			]
		);

		$control->add_control(
			'ekit_we_effect_on', [
				'label' => esc_html__( 'Effect Type', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => [
					'none' => esc_html__( 'None', 'elementskit' ),
					'css' => esc_html__( 'CSS3', 'elementskit' ),
					'tilt' => esc_html__( 'Tilt', 'elementskit' ),
					'onscroll' => esc_html__( 'On scroll', 'elementskit' ),
					'mousemove' => esc_html__( 'On mouse move', 'elementskit' ),
				],
				'assets' => $this->get_multi_parallax_assets(),
			]
		);

		/*
		* CSS animation begin
		*/
		$control->add_control(
			'ekit_we_css_animation_fx',
			[
				'label' => esc_html__('CSS Animation', 'elementskit'),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__('On', 'elementskit'),
				'render_type' => 'ui',
				'label_off' => esc_html__('Off', 'elementskit'),
				'condition' => [
					'ekit_we_effect_on' => 'css',
				],
			]
		);
		$control->add_responsive_control(
			'ekit_we_css_animation',
			[
				'label' => esc_html__( 'Animation', 'elementskit' ),
				'type' => Controls_Manager::SELECT2,
				'render_type' => 'ui',
				'default' => 'ekit-fade',
				'options' => [
					'none'=> 'None',
					'ekit-fade'=> 'Fade',
					'ekit-rotate'=> 'Rotate',
					'ekit-bounce'=> 'Bounce',
					'ekit-zoom'=> 'Zoom',
					'ekit-rotate-box'=> 'RotateBox',
					'ekit-left-right'=> 'Left Right',
					'bounce'=> 'Bounce 2',
					'flash'=> 'Flash',
					'pulse'=> 'Pulse',
					'shakeX'=> 'Shake X',
					'headShake'=> 'HeadShake',
					'swing'=> 'Swing',
					'tada'=> 'Tada',
					'wobble'=> 'Wobble',
					'jello'=> 'Jello',
				],
				'condition' => [
					'ekit_we_css_animation_fx' => 'yes',
					'ekit_we_effect_on' => 'css',
				],
				'selectors' => [
					$wrapper_selector => '-webkit-animation-name:{{UNIT}}',
					$wrapper_selector => 'animation-name:{{UNIT}}',
				],
			]
		);

		$control->add_control(
			'ekit_we_css_animation_speed',
			[
				'label' => esc_html__( 'Animation speed', 'elementskit' ),
				'type' => Controls_Manager::NUMBER,
				'render_type' => 'ui',
				'default' => '5',
				'min' => 1,
				'step' => 100,
				'condition' => [
					'ekit_we_css_animation_fx' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_animation!' => 'none',
				],
				'selectors' => [
					$wrapper_selector => '-webkit-animation-duration:{{UNIT}}s',
					$wrapper_selector => 'animation-duration:{{UNIT}}s'
				],
			]
		);
		$control->add_control(
			'ekit_we_css_animation_iteration_count',
			[
				'label' => esc_html__( 'Animation Iteration Count', 'elementskit' ),
				'type' => Controls_Manager::SELECT,
				'render_type' => 'ui',
				'default' => 'infinite',
				'options' => [
					'infinite' => esc_html__( 'Infinite', 'elementskit' ),
					'unset' => esc_html__( 'Unset', 'elementskit' ),
				],
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_animation_fx' => 'yes',
					'ekit_we_css_animation!' => 'none',
				],
				'selectors' => [
					$wrapper_selector => 'animation-iteration-count:{{UNIT}}'
				],
			]
		);
		$control->add_control(
			'ekit_we_css_animation_direction',
			[
				'label' => esc_html__( 'Animation Direction', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SELECT,
				'default' => 'normal',
				'options' => [
					'normal' => esc_html__( 'Normal', 'elementskit' ),
					'reverse' => esc_html__( 'Reverse', 'elementskit' ),
					'alternate' => esc_html__( 'Alternate', 'elementskit' ),
				],
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_animation_fx' => 'yes',
					'ekit_we_css_animation!' => 'none',
				],
				'selectors' => [
					$wrapper_selector => 'animation-direction:{{UNIT}}'
				],
			]
		);

		$control->add_control(
			'ekit_wex_hr_2',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'ekit_we_effect_on!' => 'none',
					'ekit_we_css_animation!' => 'none',
				]
			]
		);

		/*
		* tcss transform begin
		*/
		$control->add_control(
			'ekit_we_css_transform_fx',
			[
				'label' => esc_html__( 'CSS Transform', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SWITCHER,
				'return_value' => 'yes',
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_animation!' => 'none',
				]
			]
		);

		$control->add_control(
			'ekit_we_css_transform_fx_translate_toggle',
			[
				'label' => esc_html__( 'Translate', 'elementskit' ),
				'type' => Controls_Manager::POPOVER_TOGGLE,
				'render_type' => 'ui',
				'return_value' => 'yes',
				'condition' => [
					'ekit_we_css_transform_fx' => 'yes',
					'ekit_we_effect_on' => 'css',
				],
			]
		);

		$control->start_popover();

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_translate_x',
			[
				'label' => esc_html__( 'Translate X', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'render_type' => 'ui',
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => -1000,
						'max' => 1000,
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_translate_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_translate_y',
			[
				'label' => esc_html__( 'Translate Y', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => -1000,
						'max' => 1000,
					]
				],
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx_translate_toggle' => 'yes',
					'ekit_we_css_transform_fx' => 'yes',
				],
				'selectors' => [
					'(desktop)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px);',
					'(tablet)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px);',
					'(mobile)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px);',
				]
			]
		);

		$control->end_popover();

		$control->add_control(
			'ekit_we_css_transform_fx_rotate_toggle',
			[
				'label' => esc_html__( 'Rotate', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::POPOVER_TOGGLE,
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->start_popover();

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_rotate_z',
			[
				'label' => esc_html__( 'Rotate Z', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => -180,
						'max' => 180,
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_rotate_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
				'selectors' => [
					'(desktop)' . $wrapper_selector =>
						'-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg);',
					'(tablet)' . $wrapper_selector =>
						'-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg);',
					'(mobile)' . $wrapper_selector =>
						'-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg);'
				]
			]
		);

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_rotate_x',
			[
				'label' => esc_html__( 'Rotate X', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => -180,
						'max' => 180,
					]
				],
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx_rotate_toggle' => 'yes',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_rotate_y',
			[
				'label' => esc_html__( 'Rotate Y', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'render_type' => 'ui',
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => -180,
						'max' => 180,
					]
				],
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx_rotate_toggle' => 'yes',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->end_popover();

		$control->add_control(
			'ekit_we_css_transform_fx_scale_toggle',
			[
				'label' => esc_html__( 'Scale', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->start_popover();

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_scale_x',
			[
				'label' => esc_html__( 'Scale X', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px'],
				'default' => [
					'size' => 1
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 5,
						'step' => .1
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_scale_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_scale_y',
			[
				'label' => esc_html__( 'Scale Y', 'elementskit' ),
				'type' => Controls_Manager::SLIDER,
				'render_type' => 'ui',
				'size_units' => ['px'],
				'default' => [
					'size' => 1
				],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 5,
						'step' => .1
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_scale_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
				'selectors' => [
					'(desktop)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}});'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}});'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}});',
					'(tablet)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}});'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}});'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}});',
					'(mobile)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}});'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}});'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}});'
				]
			]
		);

		$control->end_popover();

		$control->add_control(
			'ekit_we_css_transform_fx_skew_toggle',
			[
				'label' => esc_html__( 'Skew', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::POPOVER_TOGGLE,
				'return_value' => 'yes',
				'condition' => [
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->start_popover();

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_skew_x',
			[
				'label' => esc_html__( 'Skew X', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['deg'],
				'range' => [
					'px' => [
						'min' => -180,
						'max' => 180,
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_skew_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
			]
		);

		$control->add_responsive_control(
			'ekit_we_css_transform_fx_skew_y',
			[
				'label' => esc_html__( 'Skew Y', 'elementskit' ),
				'render_type' => 'ui',
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['deg'],
				'range' => [
					'px' => [
						'min' => -180,
						'max' => 180,
					]
				],
				'condition' => [
					'ekit_we_css_transform_fx_skew_toggle' => 'yes',
					'ekit_we_effect_on' => 'css',
					'ekit_we_css_transform_fx' => 'yes',
				],
				'selectors' => [
					'(desktop)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y.SIZE || 0}}deg);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y.SIZE || 0}}deg);',
					'(tablet)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_tablet.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_tablet.SIZE || 0}}deg);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_tablet.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_tablet.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_tablet.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_tablet.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_tablet.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_tablet.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_tablet.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_tablet.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_tablet.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_tablet.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_tablet.SIZE || 0}}deg);',
					'(mobile)' . $wrapper_selector =>
						'-ms-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_mobile.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_mobile.SIZE || 0}}deg);'
						. '-webkit-transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_mobile.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_mobile.SIZE || 0}}deg);'
						. 'transform:'
							. 'translate({{ekit_we_css_transform_fx_translate_x_mobile.SIZE || 0}}px, {{ekit_we_css_transform_fx_translate_y_mobile.SIZE || 0}}px) '
							. 'rotateX({{ekit_we_css_transform_fx_rotate_x_mobile.SIZE || 0}}deg) rotateY({{ekit_we_css_transform_fx_rotate_y_mobile.SIZE || 0}}deg) rotateZ({{ekit_we_css_transform_fx_rotate_z_mobile.SIZE || 0}}deg) '
							. 'scaleX({{ekit_we_css_transform_fx_scale_x_mobile.SIZE || 1}}) scaleY({{ekit_we_css_transform_fx_scale_y_mobile.SIZE || 1}}) '
							. 'skew({{ekit_we_css_transform_fx_skew_x_mobile.SIZE || 0}}deg, {{ekit_we_css_transform_fx_skew_y_mobile.SIZE || 0}}deg);'
				]
			]
		);

		$control->end_popover();


		/*
		* test animation switcher
		*/

		$control->add_control(
			'ekit_we_on_test_mode',
			[
				'render_type' => 'none',
				'frontend_available' => true,
				'label' => esc_html__('Disable animation in editor ', 'elementskit'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'on',
				'label_on' => esc_html__('On', 'elementskit'),
				'label_off' => esc_html__('Off', 'elementskit'),
				'condition' => [
					'ekit_we_effect_on' => ['tilt', 'mousemove', 'onscroll'],
				]
			]
		);

		/*
		* tilt effect begin
		*/

		$control->add_control(
			'ekit_we_tilt_maxtilt',[
				'render_type' => 'none',
				'frontend_available' => true,
				'label' => esc_html__( 'MaxTilt', 'elementskit' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 20,
				'min' => 5,
				'max' => 40,
				'condition' => [
					'ekit_we_effect_on' => 'tilt',
				]
			]
		);
		$control->add_control(
			'ekit_we_tilt_scale',[
				'label' => esc_html__( 'Image Scale', 'elementskit' ),
				'description' => esc_html__( '2 = 200%, 1.5 = 150%, etc.. Default 1', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::NUMBER,
				'default' => 1,
				'min' => .3,
				'step' => .2,
				'max' => 3,
				'condition' => [
					'ekit_we_effect_on' => 'tilt',
				]
			]
		);
		$control->add_control(
			'ekit_we_tilt_disableaxis', [
				'label' => esc_html__( 'Disable Axis', 'elementskit' ),
				'description' => esc_html__( 'What axis should be disabled. Can be X or Y.', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					'' => esc_html__( 'None', 'elementskit' ),
					'x' => esc_html__( 'X axis', 'elementskit' ),
					'y' => esc_html__( 'Y axis', 'elementskit' ),
				],

				'condition' => [
					'ekit_we_effect_on' => 'tilt',
				]
			]
		);

		/*
		* mousemove effect begin
		*/
		$control->add_control(
			'ekit_we_mousemove_parallax_speed', [
				'label' => esc_html__('Speed', 'elementskit'),
				'type' => Controls_Manager::NUMBER,
				'render_type' => 'none',
				'frontend_available' => true,
				'default' => 40,
				'min' => 10,
				'max' => 150,
				'condition' => [
					'ekit_we_effect_on' => 'mousemove',
				]
			]
		);

		/*
		* onscroll effect begin
		*/
		$control->add_control(
			'ekit_we_scroll_animation', [
				'label' => esc_html__( 'Parallax style', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::SELECT,
				'default' => 'translateY',
				'options' => [
					'translateX' => esc_html__( 'X axis', 'elementskit' ),
					'translateY' => esc_html__( 'Y axis', 'elementskit' ),
					'rotate' => esc_html__( 'rotate', 'elementskit' ),
					'rotateX' => esc_html__( 'rotateX', 'elementskit' ),
					'rotateY' => esc_html__( 'rotateY', 'elementskit' ),
					'scale' => esc_html__( 'scale', 'elementskit' ),
					'scaleX' => esc_html__( 'scaleX', 'elementskit' ),
					'scaleY' => esc_html__( 'scaleY', 'elementskit' ),
				],
				'condition' => [
					'ekit_we_effect_on' => 'onscroll',
				]
			]
		);
		$control->add_control(
			'ekit_we_scroll_animation_value', [
				'label' => esc_html__( 'Parallax Transition ', 'elementskit' ),
				'description' => esc_html__( 'X, Y and Z Axis will be pixels, Rotate will be degrees (0-180), scale will be ratio', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::NUMBER,
				'default' => 250,
				'condition' => [
					'ekit_we_effect_on' => 'onscroll',
				]
			]
		);
		$control->add_control(
			'ekit_we_scroll_smoothness', [
				'label' => esc_html__( 'Smoothness', 'elementskit' ),
				'description' => esc_html__( 'factor that slowdown the animation, the more the smoothier (default: 700)', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'type' => Controls_Manager::NUMBER,
				'default' => 700,
				'min' => 0,
				'max' => 1000,
				'step' => 100,
				'condition' => [
					'ekit_we_effect_on' => 'onscroll',
				]
			]
		);
		$control->add_control(
			'ekit_we_scroll_offsettop',[
				'label' => esc_html__( 'Offset Top', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'description' => esc_html__( 'default: 0; when the element is visible', 'elementskit' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 0,
				'condition' => [
					'ekit_we_effect_on' => 'onscroll',
				]
			]
		);
		$control->add_control(
			'ekit_we_scroll_offsetbottom', [
				'label' => esc_html__( 'Offset Bottom', 'elementskit' ),
				'render_type' => 'none',
				'frontend_available' => true,
				'description' => esc_html__( 'default: 0; when the element is visible', 'elementskit' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 0,
				'condition' => [
					'ekit_we_effect_on' => 'onscroll',
				]
			]
		);


		$control->end_controls_section();

	}
}