<?php
/**
 * Reading Progress Bar element.
 *
 * @package BricksExtras
 */

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

/**
 * Reading Progress Bar element class.
 */
class X_Reading_Progress_Bar extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xreadingprogressbar';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-line-solid';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Reading progress bar', 'bricks' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'reading', 'progress', 'bar' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['containerSelector'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Container', 'bricks' ) . ')',
			'placeholder'    => 'body',
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['progressPosition'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Position', 'bricks' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'positionTop'    => esc_html__( 'Top', 'bricks' ),
				'positionBottom' => esc_html__( 'Bottom', 'bricks' ),
				'custom'         => esc_html__( 'Custom', 'bricks' ),
			),
			'default' => 'positionTop',
		);

		$this->controls['ariaLabel'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'label'          => 'aria-label',
			'placeholder'    => esc_html__( 'Reading progress bar', 'bricks' ),
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['mainsep'] = array(
			'tab'  => 'content',
			'type' => 'separator',

		);

		$this->controls['start'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Start when top of container reaches..', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'top'    => esc_html__( 'Top of viewport', 'bricksextras' ),
				'middle' => esc_html__( 'Middle of viewport', 'bricksextras' ),
				'bottom' => esc_html__( 'Bottom of viewport', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Top of viewport', 'bricksextras' ),
		);

		$this->controls['end'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'End when bottom of container reaches..', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'top'    => esc_html__( 'Top of viewport', 'bricksextras' ),
				'middle' => esc_html__( 'Middle of viewport', 'bricksextras' ),
				'bottom' => esc_html__( 'Bottom of viewport', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Bottom of viewport', 'bricksextras' ),
		);

		$this->controls['styleSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Styles', 'bricks' ),
		);

		$this->controls['progressHeight'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '',
					'property' => 'height',
				),
			),
			'placeholder' => '4px',
		);

		$this->controls['background'] = array(
			'tab'   => 'content',
			'type'  => 'background',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '',
				),
			),
		);

		$this->controls['progressBackground'] = array(
			'tab'   => 'content',
			'type'  => 'background',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-reading-progress-bar_progress',
				),
			),
		);

		$this->controls['progressBorder'] = array(
			'tab'   => 'content',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-reading-progress-bar_progress',
				),
			),
		);
	}


	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-reading-progress-bar', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'readingprogressbar' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-reading-progress-bar', BRICKSEXTRAS_URL . 'components/assets/css/readingprogressbar.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$config = array(
			'position' => isset( $this->settings['progressPosition'] ) ? $this->settings['progressPosition'] : 'positionTop',
		);

		if ( isset( $this->settings['containerSelector'] ) ) {
			$config['containerSelector'] = $this->settings['containerSelector'];
		}

		if ( isset( $this->settings['start'] ) ) {
			$config['start'] = $this->settings['start'];
		}

		if ( isset( $this->settings['end'] ) ) {
			$config['end'] = $this->settings['end'];
		}

		$aria_label = isset( $this->settings['ariaLabel'] ) ? esc_attr( $this->settings['ariaLabel'] ) : esc_attr__( 'Reading progress bar', 'bricks' );

		$this->set_attribute( '_root', 'class', 'x-reading-progress-bar' );

		$this->set_attribute( '_root', 'role', 'progressbar' );
		$this->set_attribute( '_root', 'aria-label', $aria_label );
		$this->set_attribute( '_root', 'aria-valuemin', '0' );
		$this->set_attribute( '_root', 'aria-valuenow', '0' );
		$this->set_attribute( '_root', 'aria-valuemax', '100' );

		$this->set_attribute( '_root', 'data-x-progress', wp_json_encode( $config ) );

		$this->set_attribute( 'x-reading-progress-bar_progress', 'class', 'x-reading-progress-bar_progress' );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";
		$output .= "<div {$this->render_attributes( 'x-reading-progress-bar_progress' )}>";
		$output .= '</div>';
		$output .= '</div>';

		echo $output;
	}

	/**
	 * Render builder template.
	 */
	public static function render_builder() {
		?>

		<script type="text/x-template" id="tmpl-bricks-element-xreadingprogressbar">

		<component
			class="x-reading-progress-bar"
			:data-x-progress="settings.progressPosition"
			>
		<div class="x-reading-progress-bar_progress"></div>
	</component>  
			
		</script>

		<?php
	}
}