<?php
/**
 * Header Row element.
 *
 * @package BricksExtras
 */

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

/**
 * Header Row element class.
 */
class X_Header_Row extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xheaderrow';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-line-double';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Header Row', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'header', 'row' );
	}

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

		$this->control_groups['stickyGroup'] = array(
			'title' => esc_html__( 'Sticky on scroll', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['overlayGroup'] = array(
			'title' => esc_html__( 'Overlay', 'bricks' ),
			'tab'   => 'content',
		);
	}

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

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

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

		$this->controls['headerTypography'] = array(
			'tab'   => 'content',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '',
				),
			),
		);

		$this->controls['headerBoxShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
				),
			),
		);

		$this->controls['maybeFullWidth'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Full width content', 'bricksextras' ),
			'type'  => 'checkbox',
			'css'   => array(
				array(
					'property' => 'width',
					'selector' => '.brxe-container',
					'value'    => '100%',
				),
			),
		);

		/* Overlay header */

		$this->controls['overlaySep'] = array(
			'group' => 'overlayGroup',
			'type'  => 'separator',
			'label' => esc_html__( 'Overlay Header', 'bricksextras' ),
		);

		$this->controls['overlayDisplay'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Visibility in overlay header', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'hide'   => esc_html__( 'Hide', 'bricks' ),
				'show'   => esc_html__( 'Show', 'bricks' ),
				'always' => esc_html__( 'Always show', 'bricks' ),
			),
			'inline'      => true,

			'placeholder' => esc_html__( 'Always show', 'bricks' ),
			'group'       => 'overlayGroup',
			'info'        => esc_html__( 'Show/hide header row when header is in overlay mode', 'bricksextras' ),
		);

		$this->controls['overlayBackground'] = array(
			'tab'   => 'content',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Overlay', 'bricks' ) . ')',
			'css'   => array(
				array(
					'property' => '--x-overlay-header-background',
				),
			),
			'group' => 'overlayGroup',
			'info'  => esc_html__( 'If wishing for the header to have a background color when the header is overlay', 'bricksextras' ),
		);

		/* Sticky header */

		$this->controls['stickyDisplay'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Visibility in sticky header', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'hide'   => esc_html__( 'Hide', 'bricks' ),
				'show'   => esc_html__( 'Show', 'bricks' ),
				'always' => esc_html__( 'Always show', 'bricks' ),
			),
			'group'       => 'stickyGroup',
			'inline'      => true,
			'placeholder' => esc_html__( 'Always show', 'bricks' ),
		);

		$this->controls['stickySep'] = array(
			'group' => 'stickyGroup',
			'type'  => 'separator',
			'label' => esc_html__( 'Sticky header', 'bricks' ),
		);

		$this->controls['stickyPreview'] = array(
			'group'  => 'stickyGroup',
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Preview', 'bricks' ),
			'type'   => 'checkbox',
		);

		$this->controls['stickyHeight'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Height', 'bricks' ),
			'inline' => true,
			'type'   => 'number',
			'units'  => true,
			'css'    => array(
				array(
					'selector'  => '&[data-x-sticky-active*=true]',
					'property'  => 'height',
					'important' => true,
				),
				array(
					'property'  => '--x-sticky-header-height',
					'important' => true,
				),
			),
			'group'  => 'stickyGroup',
		);

		$this->controls['stickyBackground'] = array(
			'tab'   => 'content',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'selector'  => '&[data-x-sticky-active*=true]',
					'property'  => 'background',
					'important' => true,
				),
			),
			'group' => 'stickyGroup',
		);

		$this->controls['stickyShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property'  => 'box-shadow',
					'selector'  => '&[data-x-sticky-active*=true]',
					'important' => true,
				),
			),
			'group' => 'stickyGroup',
		);

		$this->controls['stickyTypography'] = array(
			'tab'   => 'content',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property'  => 'font',
					'selector'  => '&[data-x-sticky-active*=true]',
					'important' => true,
				),
			),
			'group' => 'stickyGroup',
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-header-row', BRICKSEXTRAS_URL . 'components/assets/css/headerrow.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}


	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {

		return array(
			'name'     => 'container',
			'label'    => esc_html__( 'Header wrap', 'bricksextras' ),
			'settings' => array(
				'tag'             => 'div',
				'_alignItems'     => 'center',
				'_direction'      => 'row',
				'_justifyContent' => 'space-between',
				'_hidden'         => array(
					'_cssClasses' => 'x-header_wrap',
				),
			),
		);
	}

	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		return \BricksExtras\Helpers::get_nestable_children_helper( $this, 1 );
	}

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

		$element = $this->element;

		$config = array();

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

		$overlay_display = isset( $this->settings['overlayDisplay'] ) ? esc_attr( $this->settings['overlayDisplay'] ) : 'always';
		$sticky_display  = isset( $this->settings['stickyDisplay'] ) ? esc_attr( $this->settings['stickyDisplay'] ) : 'always';

		$this->set_attribute( '_root', 'data-x-overlay', $overlay_display );
		$this->set_attribute( '_root', 'data-x-sticky', $sticky_display );

		$this->set_attribute( 'x-header-wrap', 'class', 'x-header-wrap' );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";

		if ( method_exists( '\Bricks\Frontend', 'render_element' ) ) {

			if ( ! empty( $element['children'] ) && is_array( $element['children'] ) ) {

				foreach ( $element['children'] as $child_id ) {
					if ( ! array_key_exists( $child_id, \Bricks\Frontend::$elements ) ) {
						continue;
					}

					$child = \Bricks\Frontend::$elements[ $child_id ];

					$output .= \Bricks\Frontend::render_element( $child );
				}
			}
		}

		$output .= '</div>';

		echo $output;
	}


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

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

			<component
				:data-x-overlay="settings.overlayDisplay ? settings.overlayDisplay : 'always'"
				:data-x-sticky-active="settings.stickyPreview ? 'true' : 'false'"
			>
				<bricks-element-children :element="element" />

			</component>

		</script>

		<?php
	}
}