<?php
/**
 * Heading Control. Handles data passing from args to JS.
 *
 * @package Solace\Customizer\Controls\React
 */

namespace Solace\Customizer\Controls\React;

/**
 * Heading control for react
 */
class Heading extends \WP_Customize_Control {
	/**
	 * Control type.
	 *
	 * @var string
	 */
	public $type = 'solace_customizer_heading';
	/**
	 * Control class.
	 *
	 * @var string
	 */
	public $class = '';

	/**
	 * Should be accordion?
	 *
	 * @var bool
	 */
	public $accordion = false;

	/**
	 * Initial state.
	 *
	 * @var bool
	 */
	public $expanded = true;

	/**
	 * How many controls to wrap.
	 *
	 * @var int
	 */
	public $controls_to_wrap = 1;

	/**
	 * Label before the accordion.
	 *
	 * @var string
	 */
	public $category_label = '';

	/**
	 * Send data to _s
	 *
	 * @return array
	 */
	public function json() {
		$json                  = parent::json();
		$json['classes']       = $this->class;
		$json['accordion']     = $this->accordion;
		$json['categoryLabel'] = $this->category_label;

		if ( $this->accordion === true ) {
			$json['classes'] .= ' accordion';
		}

		$json['style'] = $this->print_style();

		return $json;
	}

	/**
	 * Render the control.
	 */
	protected function render() {
		$id     = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
		$class  = 'customize-control customize-control-' . $this->type;
		$class .= ' ' . $this->class;
		if ( $this->accordion ) {
			$class .= ' accordion';
		}

		if ( $this->expanded ) {
			$class .= ' expanded';
		}

		echo '<li id="' . esc_attr( $id ) . '" class="' . esc_attr( $class ) . '">';
		echo '</li>';
	}

	/**
	 * Print the style for the accordion.
	 */
	protected function print_stylex() {
		$style = '';
		for ( $i = 1; $i <= $this->controls_to_wrap; $i ++ ) {
			$style .= '.accordion.' . $this->class . ':not(.expanded)';
			for ( $j = 1; $j <= $i; $j ++ ) {
				$style .= ' + li';
			}
			if ( $i !== $this->controls_to_wrap ) {
				$style .= ',';
			}
		}
		
		$style .= '{max-height: 0;opacity: 0;margin: 0; overflow: hidden; padding:0 !important;}';
		// $style .= '{max-height: 0;opacity: 1;margin: 0; overflow: visible; padding:0 !important;}';

		return $style;
	}

	protected function print_style() {
		$style  = '';
		$style .= '<style>';

		for ( $i = 1; $i <= $this->controls_to_wrap; $i++ ) {
			$selector = '.accordion.' . $this->class . ':not(.expanded)';

			for ( $j = 1; $j <= $i; $j++ ) {
				$selector .= ' + li';
			}

			if (
				$this->class === 'advanced-sidebar-accordion-h2' &&
				preg_match('/h[1-6]/i', $selector)
			) {
				continue; 
			}

			$style .= $selector;

			if ( $i !== $this->controls_to_wrap ) {
				$style .= ',';
			}
		}

		$style .= '{max-height: 0; opacity: 0; margin: 0; overflow: hidden; padding: 0 !important;}';

		$style .= '</style>';

		return $style;
	}


	/**
	 * This method overrides the default render
	 * so that nothing is rendered.
	 * Previously it would try to put an input element where the value was `esc_attr()`
	 * This would trigger notices in PHP
	 * It is not required to have a render as it is being handled by React.
	 */
	final public function render_content() {
		// this is rendered from React
	}
}
