<?php


namespace ColibriWP\Theme\Components\Header;

use ColibriWP\Theme\Components\CSSOutput;
use ColibriWP\Theme\Core\PartialComponent;
use ColibriWP\Theme\Core\Utils;
use ColibriWP\Theme\Defaults;
use ColibriWP\Theme\Theme;
use ColibriWP\Theme\Translations;

class HeroStyle extends PartialComponent {

	protected static $instances = array();
	protected $prefix           = '';
	protected $selector         = '';

	public function __construct( $prefix, $selector ) {
		$this->prefix   = $prefix;
		$this->selector = $selector;
	}

	public static function getInstance( $prefix, $selector ) {
		$key = Utils::slugify( "{$prefix}-{$selector}" );
		if ( ! isset( static::$instances[ $key ] ) ) {
			static::$instances[ $key ] = new static( $prefix, $selector );
		}

		return static::$instances[ $key ];
	}

	public function renderContent( $parameters = array() ) {
		?>
		<div class="background-wrapper" data-colibri-hide-pen="true">
			<div class="background-layer">
				<div class="background-layer">
					<?php $this->doSlideshow(); ?>
					<?php $this->doVideoBackground(); ?>
				</div>
				<div class="overlay-layer"></div>
				<div class="shape-layer"></div>
			</div>
		</div>
		<?php
	}

	public function doSlideshow() {
		$slideshow_prefix = 'style.background.slideshow.';
		$component_id     = "{$this->getPrefix()}slideshow";
		$slides           = $this->prefixedMod( "{$slideshow_prefix}slides" );

		$slide_duration = $this->prefixedMod( "{$slideshow_prefix}duration.value" );
		$slide_speed    = $this->prefixedMod( "{$slideshow_prefix}duration.value" );

		$this->printSlideshow( $component_id, $slides, $slide_duration, $slide_speed );
	}

	/**
	 * @return string
	 */
	public function getPrefix() {
		return $this->prefix;
	}

	/**
	 * @param string $prefix
	 *
	 * @return HeroStyle
	 */
	public function setPrefix( $prefix ) {
		$this->prefix = $prefix;

		return $this;
	}

	public function prefixedMod( $name ) {
		$name = $this->getPrefix() . $name;

		return $this->mod( $name );
	}

	public function printSlideshow( $component_id, $slides, $slide_duration, $slide_speed ) {

		if ( $this->prefixedMod( 'style.background.type' ) !== 'slideshow' ) {
			return;
		}

		$settings = json_encode(
			array(
				'speed'    => $slide_speed,
				'duration' => $slide_duration,
			)
		);

		?>
		<div class="colibri-slideshow background-layer"
			 data-kubio-settings="<?php echo esc_attr( $settings ); ?>"
			 data-colibri-id="<?php echo esc_attr( $component_id ); ?>"
			 data-kubio-component="slideshow">
			<?php foreach ( $slides as $slide ) : ?>
				<?php $this->printSlide( $slide ); ?>
			<?php endforeach; ?>
		</div>
		<?php
	}

	private function printSlide( $slide ) {
		?>
		<div class="slideshow-image"
			 style="background-image:url(<?php echo esc_attr( $slide['url'] ); ?>)"></div>
		<?php
	}

	public function doVideoBackground() {

		$component_id = "{$this->getPrefix()}video";

		$this->printVideoBackground( $component_id );
	}

	public function printVideoBackground( $component_id ) {

		if ( $this->prefixedMod( 'style.background.type' ) !== 'video' ) {
			return;
		}
		$video_prefix = 'style.background.video.';

		$mime_type = 'video/mp4';
		$poster    = $this->prefixedMod( "{$video_prefix}poster.url" );
		$video     = '';

		if ( $this->prefixedMod( "{$video_prefix}videoType" ) === 'external' ) {
			$mime_type = 'video/x-youtube';
			$video     = $this->prefixedMod( "{$video_prefix}externalUrl" );
		} else {
			$id = absint( $this->prefixedMod( "{$video_prefix}internalUrl" ) );
			if ( $id ) {
				$video     = wp_get_attachment_url( $id );
				$type      = wp_check_filetype( $video, wp_get_mime_types() );
				$mime_type = $type['type'];
			}
		}

		?>
		<div
				class="kubio-video-background background-layer"
				data-kubio-component="video-background"
				data-mime-type="<?php echo esc_attr( $mime_type ); ?>"
				data-video="<?php echo esc_attr( $video ); ?>"
				data-poster="<?php echo esc_attr( $poster ); ?>"
				style="<?php echo ( $poster ? "background-image:url({$poster});" : '' ); ?>"
				data-colibri-id="<?php echo esc_attr( $component_id ); ?>">
		</div>
		<?php
	}

	public function whenCustomizerPreview() {
		$component_id     = "{$this->getPrefix()}slideshow";
		$slideshow_prefix = 'style.background.slideshow.';
		$this->addFrontendJSData(
			$component_id,
			array(
				'wpSettings' => array(
					'slideDuration' => "{$this->getPrefix()}{$slideshow_prefix}duration.value",
					'slideSpeed'    => "{$this->getPrefix()}{$slideshow_prefix}speed.value",
				),
			),
			true
		);

		$video_prefix       = 'style.background.video.';
		$video_component_id = "{$this->getPrefix()}video";

		$this->addFrontendJSData(
			$video_component_id,
			array(

				'wpSettings' => array(
					'videoType'   => "{$this->getPrefix()}{$video_prefix}videoType",
					'externalUrl' => "{$this->getPrefix()}{$video_prefix}externalUrl",
					'internalUrl' => "{$this->getPrefix()}{$video_prefix}internalUrl",
					'posterUrl'   => "{$this->getPrefix()}{$video_prefix}poster.url",
				),
			)
		);

	}

	public function getOptions() {
		$prefix = $this->getPrefix();

		$wrapper_settings = array_merge(
			$this->getSlideshowSettings( $prefix ),
			$this->getVideoSettings( $prefix ),
			$this->getOverlaySettings( $prefix ),
			$this->getDividerSettings( $prefix ),
			array()
		);

		foreach ( $wrapper_settings as $key => $setting_data ) {
			if ( ! isset( $setting_data['control']['selective_refresh'] ) ) {
				$wrapper_settings[ $key ]['control']['selective_refresh'] = array(
					'selector' => $this->getSelector() . ' .background-wrapper',
					'function' => array( $this, 'renderContent' ),
				);
			}
		}

		return array(
			'settings' => array_merge(
				array(),
				$this->getGeneralBackgroundSettings( $prefix ),
				$this->getImageSettings( $prefix ),
				$this->getGradientSettings( $prefix ),
				$wrapper_settings,
				$this->getSpacingSettings( $prefix )
			),
		);
	}

	protected function getSlideshowSettings( $prefix ) {

		$slideshow_prefix = "{$prefix}style.background.slideshow.";

		$self = $this;

		return array(
			"{$slideshow_prefix}slides"         => array(
				'default' => Defaults::get( "{$slideshow_prefix}slides" ),
				'control' => array(
					'colibri_tab'    => 'style',
					'label'          => Translations::escHtml( 'slideshow' ),
					'type'           => 'repeater',
					'section'        => 'hero',
					'item_label'     => Translations::get( 'slide_n' ),
					'item_add_label' => Translations::get( 'add_slide' ),
					'fields'         => array(
						'url' => array(
							'type'    => 'image',
							'label'   => Translations::get( 'image' ),
							'default' => Defaults::get( "{$slideshow_prefix}slides.0.url" ),
						),
					),
					'active_rules'   => array(
						array(
							'setting'  => "{$prefix}style.background.type",
							'operator' => '=',
							'value'    => 'slideshow',
						),
					),
				),
			),

			"{$slideshow_prefix}duration.value" => array(
				'default'   => Defaults::get( "{$slideshow_prefix}duration.value", 100 ),
				'transport' => 'postMessage',
				'control'   => array(
					'label'        => Translations::escHtml( 'slide_duration' ),
					'colibri_tab'  => 'style',
					'type'         => 'slider',
					'section'      => 'hero',
					'min'          => 0,
					'max'          => 10000,
					'step'         => 100,
					'active_rules' => array(
						array(
							'setting'  => "{$prefix}style.background.type",
							'operator' => '=',
							'value'    => 'slideshow',
						),
					),
				),
			),

			"{$slideshow_prefix}speed.value"    => array(
				'default'   => Defaults::get( "{$slideshow_prefix}speed.value" ),
				'transport' => 'postMessage',
				'control'   => array(
					'label'        => Translations::escHtml( 'effect_speed' ),
					'colibri_tab'  => 'style',
					'type'         => 'slider',
					'section'      => 'hero',
					'min'          => 100,
					'max'          => 10000,
					'step'         => 100,
					'active_rules' => array(
						array(
							'setting'  => "{$prefix}style.background.type",
							'operator' => '=',
							'value'    => 'slideshow',
						),
					),
				),
			),

		);
	}

	protected static function getVideoSettings( $prefix ) {

		$base_active_rule
			= array(
				'setting'  => "{$prefix}style.background.type",
				'operator' => '=',
				'value'    => 'video',
			);

		$video_prefix = "{$prefix}style.background.video.";

		// $self = $this;

		return array(
			"{$video_prefix}videoType"   => array(
				'default' => Defaults::get( "{$video_prefix}videoType" ),
				'control' => array(
					'label'        => Translations::get( 'video_type' ),
					'type'         => 'button-group',
					'button_size'  => 'medium',
					'choices'      => array(
						'internal' => Translations::escHtml( 'self_hosted' ),
						'external' => Translations::escHtml( 'external_video' ),
					),
					'section'      => 'hero',
					'colibri_tab'  => 'style',
					'active_rules' => array( $base_active_rule ),
				),

			),

			"{$video_prefix}externalUrl" => array(
				'default' => Defaults::get( "{$video_prefix}externalUrl" ),
				'control' => array(
					'label'        => Translations::get( 'youtube_url' ),
					'type'         => 'input',
					'section'      => 'hero',
					'colibri_tab'  => 'style',
					'active_rules' => array(
						$base_active_rule,
						array(
							'setting'  => "{$video_prefix}videoType",
							'operator' => '=',
							'value'    => 'external',
						),
					),
				),

			),

			"{$video_prefix}internalUrl" => array(
				'default' => Defaults::get( "{$video_prefix}internalUrl" ),
				'control' => array(
					'label'        => Translations::get( 'self_hosted_video' ),
					'type'         => 'video',
					'section'      => 'hero',
					'colibri_tab'  => 'style',
					'active_rules' => array(
						$base_active_rule,
						array(
							'setting'  => "{$video_prefix}videoType",
							'operator' => '=',
							'value'    => 'internal',
						),
					),
				),

			),

			"{$video_prefix}poster.url"  => array(
				'default'   => Defaults::get( "{$video_prefix}poster.url" ),
				'transport' => 'postMessage',
				'control'   => array(
					'label'        => Translations::get( 'video_poster' ),
					'type'         => 'image',
					'section'      => 'hero',
					'colibri_tab'  => 'style',

					'active_rules' => array(
						$base_active_rule,
						array(
							'setting'  => "{$prefix}style.background.type",
							'operator' => '=',
							'value'    => 'video',
						),
					),

				),

			),

		);
	}


	public function getOverlaySettings( $prefix ) {

		$overlay_prefix = "{$prefix}style.background.overlay.";

		$active_rule_base = array(
			'setting'  => "{$overlay_prefix}enabled",
			'operator' => '=',
			'value'    => true,
		);

		$shape_base_url = Theme::rootDirectoryUri() . '/resources/images/header-shapes';

		return array(

			"{$prefix}hero.separator5"          => array(
				'default' => '',
				'control' => array(
					'label'        => '',
					'type'         => 'separator',
					'section'      => 'hero',
					'colibri_tab'  => 'style',
					'active_rules' => array(
						array(
							'setting'  => "{$prefix}style.background.type",
							'operator' => '!=',
							'value'    => 'color',
						),
					),
				),
			),

			"{$overlay_prefix}type"             => array(
				'default'   => Defaults::get( "{$overlay_prefix}type" ),
				'transport' => 'postMessage',
				'control'   => array(
					'label'        => Translations::get( 'overlay_type' ),
					'type'         => 'button-group',
					'button_size'  => 'medium',
					'choices'      => array(
						'shapeOnly' => Translations::escHtml( 'shape_only' ),
						'color'     => Translations::escHtml( 'color' ),
						'gradient'  => Translations::escHtml( 'gradient' ),
					),
					'section'      => 'hero',
					'colibri_tab'  => 'style',
					'active_rules' => array( $active_rule_base ),
				),
			),

			"{$overlay_prefix}shape.value"      => array(
				'default'      => Defaults::get( "{$overlay_prefix}shape.value", 'none' ),
				'transport'    => 'postMessage',
				'control'      => array(
					'label'       => Translations::escHtml( 'overlay_shape' ),
					'type'        => 'select',
					'section'     => 'hero',
					'colibri_tab' => 'style',
					'size'        => 'small',
					'choices'     => array(
						'none'                      => Translations::get( 'none' ),
						'circles'                   => Translations::get( 'circles' ),
						'10degree-stripes'          => Translations::get( '10degree_stripes' ),
						'rounded-squares-blue'      => Translations::get( 'rounded_squares_blue' ),
						'many-rounded-squares-blue' => Translations::get( 'many_rounded_squares_blue' ),
						'two-circles'               => Translations::get( 'two_circles' ),
						'circles-2'                 => Translations::get( 'circles_2' ),
						'circles-3'                 => Translations::get( 'circles_3' ),
						'circles-gradient'          => Translations::get( 'circles_gradient' ),
						'circles-white-gradient'    => Translations::get( 'circles_white_gradient' ),
						'waves'                     => Translations::get( 'waves' ),
						'waves-inverted'            => Translations::get( 'waves_inverted' ),
						'dots'                      => Translations::get( 'dots' ),
						'left-tilted-lines'         => Translations::get( 'left_tilted_lines' ),
						'right-tilted-lines'        => Translations::get( 'right_tilted_lines' ),
						'right-tilted-strips'       => Translations::get( 'right_tilted_strips' ),
					),
				),
				'css_output'   => array(
					array(
						'selector'      => "{$this->selector} .background-layer .shape-layer",
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'background-image',
						'value_pattern' => 'url(' . $shape_base_url . '/%s.png)',
					),
				),
				'active_rules' => array( $active_rule_base ),
			),

			"{$overlay_prefix}light"            => array(
				'default'      => Defaults::get( "{$overlay_prefix}light" ),
				'transport'    => 'postMessage',
				'control'      => array(
					'label'       => Translations::escHtml( 'shape_light' ),
					'type'        => 'slider',
					'section'     => 'hero',
					'colibri_tab' => 'style',

				),
				'css_output'   => array(
					array(
						'selector'      => "{$this->selector} .background-layer .shape-layer",
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'filter',
						'value_pattern' => 'invert(%s%%)',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$overlay_prefix}shape.value",
						'operator' => '!=',
						'value'    => 'none',
					),
				),
			),

			"{$overlay_prefix}color.value"      => array(
				'default'      => Defaults::get( "{$overlay_prefix}color.value" ),
				'control'      => array(
					'label'       => Translations::get( 'color' ),
					'type'        => 'color',
					'alpha'       => false,
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
				'css_output'   => array(
					array(
						'selector' => "{$this->selector} .background-layer .overlay-layer",
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-color',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$overlay_prefix}type",
						'operator' => '=',
						'value'    => 'color',
					),
				),
			),

			"{$overlay_prefix}gradient"         => array(
				'default'      => Defaults::get( "{$overlay_prefix}gradient" ),
				'control'      => array(
					'label'       => Translations::escHtml( 'gradient' ),
					'type'        => 'gradient',
					'section'     => 'hero',
					'colibri_tab' => 'style',
					'choices'     => Defaults::get( 'gradients', '' ),
				),
				'css_output'   => array(
					array(
						'selector'      => "{$this->selector} .background-layer .overlay-layer",
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'background-image',
						'value_pattern' => CSSOutput::GRADIENT_VALUE_PATTERN,
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$overlay_prefix}type",
						'operator' => '=',
						'value'    => 'gradient',
					),
				),
			),

			"{$overlay_prefix}gradient_opacity" => array(
				'default'      => Defaults::get( "{$overlay_prefix}gradient_opacity" ),
				'control'      => array(
					'label'       => Translations::get( 'opacity' ),
					'type'        => 'slider',
					'section'     => 'hero',
					'colibri_tab' => 'style',
					'min'         => 1,
					'max'         => 100,
				),
				'css_output'   => array(
					array(
						'selector'      => "{$this->selector} .background-layer .overlay-layer",
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'opacity',
						'value_pattern' => 'calc( %s / 100 )',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$overlay_prefix}type",
						'operator' => '=',
						'value'    => 'gradient',
					),
				),
			),

			"{$overlay_prefix}enabled"          => array(
				'default'    => Defaults::get( "{$overlay_prefix}enabled" ),
				'transport'  => 'postMessage',
				'control'    => array(
					'label'       => Translations::get( 'show_background_overlay' ),
					'type'        => 'group',
					'section'     => 'hero',
					'show_toggle' => true,
					'controls'    => array(
						"{$overlay_prefix}type",
						"{$overlay_prefix}color.value",
						"{$overlay_prefix}gradient",
						"{$overlay_prefix}gradient_opacity",
						"{$overlay_prefix}shape.value",
						"{$overlay_prefix}light",
					),
					'colibri_tab' => 'style',
				),
				'css_output' => array(
					array(
						'selector'    => "{$this->selector} .background-layer .overlay-layer",
						'media'       => CSSOutput::NO_MEDIA,
						'property'    => 'display',
						'false_value' => 'none',
					),
				),
			),
		);
	}

	public function getDividerSettings( $prefix ) {

		$divider_prefix   = "{$prefix}style.separatorBottom.";
		$section          = 'hero';
		$active_rule_base = array(
			'setting'  => "{$divider_prefix}enabled",
			'operator' => '=',
			'value'    => true,
		);

		return array(

			"{$prefix}hero.separator6"      => array(
				'default' => '',
				'control' => array(
					'label'       => '',
					'type'        => 'separator',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
			),

			"{$divider_prefix}enabled"      => array(
				'default' => Defaults::get( "{$divider_prefix}enabled" ),
				'control' => array(
					'label'             => Translations::get( 'show_bottom_divider' ),
					'type'              => 'group',
					'section'           => $section,
					'show_toggle'       => true,
					'colibri_tab'       => 'style',
					'controls'          => array(
						"{$divider_prefix}type",
						"{$divider_prefix}negative",
						"{$divider_prefix}color",
						"{$divider_prefix}height.value",
					),
					'selective_refresh' => array(
						'selector' => $this->getSelector(),
						'function' => array( $this, 'renderContent' ),
					),

				),
			),

			"{$divider_prefix}type"         => array(
				'default'      => Defaults::get( "{$divider_prefix}type", 'none' ),
				'control'      => array(
					'label'             => Translations::escHtml( 'divider_style' ),
					'type'              => 'select',
					'section'           => 'hero',
					'colibri_tab'       => 'style',
					'size'              => 'small',
					'choices'           => array(
						'tilt'                  => Translations::get( 'tilt' ),
						'tilt-flipped'          => Translations::get( 'tilt-flipped' ),
						'triangle'              => Translations::get( 'triangle' ),
						'triangle-asymmetrical' => Translations::get( 'triangle-asymmetrical' ),
						'opacity-fan'           => Translations::get( 'opacity-fan' ),
						'opacity-tilt'          => Translations::get( 'opacity-tilt' ),
						'mountains'             => Translations::get( 'mountains' ),
						'pyramids'              => Translations::get( 'pyramids' ),
						'small-waves'           => Translations::get( 'small-waves' ),
						'waves'                 => Translations::get( 'waves' ),
						'wave-brush'            => Translations::get( 'wave-brush' ),
						'waves-pattern'         => Translations::get( 'waves-pattern' ),
						'clouds'                => Translations::get( 'clouds' ),
						'curve'                 => Translations::get( 'curve' ),
						'curve-asymmetrical'    => Translations::get( 'curve-asymmetrical' ),
						'drops'                 => Translations::get( 'drops' ),
						'arrow'                 => Translations::get( 'arrow' ),
						'book'                  => Translations::get( 'book' ),
						'split'                 => Translations::get( 'split' ),
						'zigzag'                => Translations::get( 'zigzag' ),

					),
					'selective_refresh' => array(
						'selector' => $this->getSelector(),
						'function' => array( $this, 'renderContent' ),
					),
				),
				'active_rules' => array( $active_rule_base ),
			),

			"{$divider_prefix}color"        => array(
				'default'      => Defaults::get( "{$divider_prefix}color" ),
				'control'      => array(
					'label'       => Translations::escHtml( 'color' ),
					'type'        => 'color',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
				'css_output'   => array(
					array(
						'selector' => "{$this->selector} .h-separator svg path",
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-color',
					),

					array(
						'selector' => "{$this->selector} .h-separator svg path",
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'fill',
					),
				),
				'active_rules' => array( $active_rule_base ),
			),

			"{$divider_prefix}height.value" => array(
				'default'    => Defaults::get( "{$divider_prefix}height.value", 100 ),
				'control'    => array(
					'label'        => Translations::escHtml( 'divider_height' ),
					'colibri_tab'  => 'style',
					'type'         => 'slider',
					'section'      => 'hero',
					'min'          => 0,
					'max'          => 300,
					'step'         => 1,
					'active_rules' => array( $active_rule_base ),
				),
				'css_output' => array(
					array(
						'selector'      => "{$this->selector} .h-separator",
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'height',
						'value_pattern' => '%spx !important',
					),
				),
			),

			"{$divider_prefix}negative"     => array(
				'default' => Defaults::get( "{$divider_prefix}negative", 100 ),
				'control' => array(
					'label'             => Translations::escHtml( 'divider_negative' ),
					'type'              => 'switch',
					'section'           => 'hero',
					'colibri_tab'       => 'style',
					'active_rules'      => array( $active_rule_base ),
					'selective_refresh' => array(
						'selector' => $this->getSelector(),
						'function' => array( $this, 'renderContent' ),
					),
				),
			),
		);
	}

	/**
	 * @return string
	 */
	public function getSelector() {
		return $this->selector;
	}

	/**
	 * @param string $selector
	 */
	public function setSelector( $selector ) {
		$this->selector = $selector;
	}

	protected function getGeneralBackgroundSettings( $prefix ) {

		return array(

			"{$prefix}full_height"            => array(
				'default'    => Defaults::get( "{$prefix}full_height" ),
				'control'    => array(
					'label'       => Translations::get( 'full_height' ),
					'type'        => 'switch',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
				'css_output' => array(
					array(
						'selector'    => $this->selector,
						'media'       => CSSOutput::NO_MEDIA,
						'property'    => 'min-height',
						'true_value'  => '100vh',
						'false_value' => 'auto',
					),
				),
			),

			"{$prefix}hero.separator2"        => array(
				'default' => '',
				'control' => array(
					'label'       => '',
					'type'        => 'separator',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
			),

			"{$prefix}style.background.color" => array(
				'default'    => Defaults::get( "{$prefix}style.background.color" ),
				'control'    => array(
					'label'       => Translations::escHtml( 'background_color' ),
					'type'        => 'color',
					'section'     => 'hero',
					'colibri_tab' => 'style',

				),
				'css_output' => array(
					array(
						'selector' => $this->selector,
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-color',
					),
				),
			),

			"{$prefix}style.background.type"  => array(
				'default' => Defaults::get( "{$prefix}style.background.type" ),
				'control' => array(
					'label'             => Translations::escHtml( 'background_type' ),
					'focus_alias'       => 'hero_background',
					'type'              => 'button-group',
					'button_size'       => 'medium',
					'choices'           => array(
						'image'     => Translations::escHtml( 'image' ),
						'gradient'  => Translations::escHtml( 'gradient' ),
						'slideshow' => Translations::escHtml( 'slideshow' ),
						'video'     => Translations::escHtml( 'video' ),
					),
					'colibri_tab'       => 'style',
					'none_value'        => 'color',
					'section'           => 'hero',
					'selective_refresh' => array(
						'selector' => $this->getSelector() . ' .background-wrapper',
						'function' => array( $this, 'renderContent' ),
					),
				),
			),

		);
	}

	protected function getImageSettings( $prefix ) {

		$image_prefix = "{$prefix}style.background.image.0.";

		return array(
			"{$image_prefix}source.url" => array(
				'default'      => Defaults::get( "{$image_prefix}source.url", '' ),
				'control'      => array(
					'label'       => Translations::escHtml( 'image' ),
					'type'        => 'image',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
				'css_output'   => array(
					array(
						'selector'      => static::getSelector(),
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'background-image',
						'value_pattern' => 'url("%s")',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'image',
					),
				),
			),

			"{$image_prefix}position"   => array(
				'default'      => Defaults::get( "{$image_prefix}position", 'top center' ),
				'control'      => array(
					'label'                   => Translations::escHtml( 'position' ),
					'type'                    => 'select',
					'section'                 => 'hero',
					'colibri_tab'             => 'style',
					'inline_content_template' => true,
					'choices'                 => array(
						'top left'      => Translations::escHtml( 'top_left' ),
						'top center'    => Translations::escHtml( 'top_center' ),
						'top right'     => Translations::escHtml( 'top_right' ),
						'center left'   => Translations::escHtml( 'center_left' ),
						'center center' => Translations::escHtml( 'center_center' ),
						'center right'  => Translations::escHtml( 'center_right' ),
						'bottom left'   => Translations::escHtml( 'bottom_left' ),
						'bottom center' => Translations::escHtml( 'bottom_center' ),
						'bottom right'  => Translations::escHtml( 'bottom_right' ),
					),
				),
				'css_output'   => array(
					array(
						'selector' => $this->selector,
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-position',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'image',
					),
				),
			),

			"{$image_prefix}attachment" => array(
				'default'      => Defaults::get( "{$image_prefix}attachment", '' ),
				'control'      => array(
					'label'                   => Translations::escHtml( 'attachment' ),
					'inline_content_template' => true,
					'type'                    => 'select',
					'section'                 => 'hero',
					'colibri_tab'             => 'style',
					'choices'                 => array(
						'scroll' => Translations::escHtml( 'scroll' ),
						'fixed'  => Translations::escHtml( 'fixed' ),
					),
				),
				'css_output'   => array(
					array(
						'selector' => $this->selector,
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-attachment',
					),

					array(
						'selector'      => static::getSelector(),
						'media'         => CSSOutput::mobileMedia(),
						'property'      => 'background-attachment',
						'value_pattern' => 'none',
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'image',
					),
				),
			),

			"{$image_prefix}repeat"     => array(
				'default'      => Defaults::get( "{$image_prefix}repeat", 'no-repeat' ),
				'control'      => array(
					'label'                   => Translations::escHtml( 'repeat', '' ),
					'inline_content_template' => true,
					'type'                    => 'select',
					'section'                 => 'hero',
					'colibri_tab'             => 'style',
					'choices'                 => array(
						'no-repeat' => Translations::escHtml( 'no-repeat' ),
						'repeat'    => Translations::escHtml( 'repeat', '' ),
						'repeat-x'  => Translations::escHtml( 'repeat', 'X' ),
						'repeat-y'  => Translations::escHtml( 'repeat', 'Y' ),

					),
				),
				'css_output'   => array(
					array(
						'selector' => $this->selector,
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-repeat',
					),

				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'image',
					),
				),
			),

			"{$image_prefix}size"       => array(
				'default'      => Defaults::get( "{$image_prefix}size", 'cover' ),
				'control'      => array(
					'label'                   => Translations::escHtml( 'size' ),
					'inline_content_template' => true,
					'type'                    => 'select',
					'section'                 => 'hero',
					'colibri_tab'             => 'style',
					'choices'                 => array(
						'auto'    => Translations::escHtml( 'auto' ),
						'cover'   => Translations::escHtml( 'cover' ),
						'contain' => Translations::escHtml( 'contain' ),
					),
				),
				'css_output'   => array(
					array(
						'selector' => $this->selector,
						'media'    => CSSOutput::NO_MEDIA,
						'property' => 'background-size',
					),

				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'image',
					),
				),
			),
		);
	}

	protected function getGradientSettings( $prefix ) {

		$gradient_prefix = "{$prefix}style.background.image.0.";

		return array(
			"{$gradient_prefix}source.gradient" => array(
				'default'      => Defaults::get( "{$gradient_prefix}source.gradient" ),
				'control'      => array(
					'label'       => Translations::escHtml( 'gradient' ),
					'type'        => 'gradient',
					'section'     => 'hero',
					'colibri_tab' => 'style',
					'choices'     => Defaults::get( 'gradients', '' ),
				),
				'css_output'   => array(
					array(
						'selector'      => static::getSelector(),
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'background-image',
						'value_pattern' => CSSOutput::GRADIENT_VALUE_PATTERN,
					),
				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}style.background.type",
						'operator' => '=',
						'value'    => 'gradient',
					),
				),
			),
		);
	}

	protected function getSpacingSettings( $prefix ) {
		return array(
			"{$prefix}hero.separator1"            => array(
				'default'      => '',
				'control'      => array(
					'label'       => '',
					'type'        => 'separator',
					'section'     => 'hero',
					'colibri_tab' => 'style',
				),
				'active_rules' => array(
					array(
						'setting'  => "{$prefix}full_height",
						'operator' => '=',
						'value'    => false,
					),
				),
			),

			"{$prefix}style.padding.top.value"    => array(
				'default'    => Defaults::get( "{$prefix}style.padding.top.value", 150 ),
				'transport'  => 'postMessage',
				'control'    => array(
					'label'        => Translations::escHtml( 'spacing_top' ),
					'colibri_tab'  => 'style',
					'type'         => 'slider',
					'section'      => 'hero',
					'min'          => 0,
					'max'          => 300,
					'step'         => 1,
					'active_rules' => array(
						array(
							'setting'  => "{$prefix}full_height",
							'operator' => '=',
							'value'    => false,
						),
					),
				),
				'css_output' => array(
					array(
						'selector'      => $this->selector,
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'padding-top',
						'value_pattern' => '%spx',
					),
				),
			),

			"{$prefix}style.padding.bottom.value" => array(
				'default'    => Defaults::get( "{$prefix}style.padding.bottom.value", 150 ),
				'transport'  => 'postMessage',
				'control'    => array(
					'label'        => Translations::escHtml( 'spacing_bottom' ),
					'colibri_tab'  => 'style',
					'type'         => 'slider',
					'section'      => 'hero',
					'min'          => 0,
					'max'          => 350,
					'step'         => 1,
					'active_rules' => array(
						array(
							'setting'  => "{$prefix}full_height",
							'operator' => '=',
							'value'    => false,
						),
					),
				),
				'css_output' => array(
					array(
						'selector'      => $this->selector,
						'media'         => CSSOutput::NO_MEDIA,
						'property'      => 'padding-bottom',
						'value_pattern' => '%spx',
					),
				),
			),
		);
	}
}




