<?php
/**
 * Page Tour Step Element
 *
 * @package BricksExtras
 */

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

/**
 * Page Tour Step element class.
 */
class X_Page_Tour_Step extends \Bricks\Element {
	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xpagetourstep';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-direction';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';
	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xPageTourPopover' );
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Page Tour Step', 'bricksextras' );
	}

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

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

		$this->control_groups['steps'] = array(
			'title' => esc_html__( 'Popover Styling', 'bricksextras' ),
			'tab'   => 'content',
		);
	}

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

		// Step Settings.
		$this->controls['stepTitle'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Title', 'bricks' ),
			'type'        => 'text',
			'placeholder' => '',
			'inline'      => true,
		);

		// Target Element.
		$this->controls['stepSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Element', 'bricks' ) . ' (' . esc_html__( 'Selector', 'bricks' ) . ')',
			'type'        => 'text',
			'info'        => esc_html__( 'Leave blank for step centered in viewport', 'bricksextras' ),
			'placeholder' => '.your-target-element',
			'inline'      => true,
		);

		// Position.
		$this->controls['stepPosition'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Preferred placement', 'bricksextras' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'auto'         => esc_html__( 'Auto', 'bricks' ),
				'top'          => esc_html__( 'Top', 'bricks' ),
				'bottom'       => esc_html__( 'Bottom', 'bricks' ),
				'left'         => esc_html__( 'Left', 'bricks' ),
				'right'        => esc_html__( 'Right', 'bricks' ),
				'top-start'    => esc_html__( 'Top Start', 'bricksextras' ),
				'top-end'      => esc_html__( 'Top End', 'bricksextras' ),
				'bottom-start' => esc_html__( 'Bottom Start', 'bricksextras' ),
				'bottom-end'   => esc_html__( 'Bottom End', 'bricksextras' ),
				'left-start'   => esc_html__( 'Left Start', 'bricksextras' ),
				'left-end'     => esc_html__( 'Left End', 'bricksextras' ),
				'right-start'  => esc_html__( 'Right Start', 'bricksextras' ),
				'right-end'    => esc_html__( 'Right End', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Auto', 'bricks' ),
		);

		// Step ID.
		$this->controls['stepId'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Step ID', 'bricksextras' ),
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => 'advanced-settings',
			'description' => esc_html__( 'User-friendly ID for hash link navigation (e.g., link to #advanced-step)', 'bricksextras' ),
		);

		// Button Text - Previous.
		$this->controls['buttonTextSep'] = array(
			'label' => esc_html__( 'Button text', 'bricks' ),
			'tab'   => 'content',
			'type'  => 'separator',
		);

		// Button Text - Previous.
		$this->controls['buttonPrevText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Previous', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => '',
		);

		// Button Text - Next.
		$this->controls['buttonNextText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Next', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => '',
		);

		// Button Text - Close.
		$this->controls['buttonCloseText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Finish', 'bricks' ),
			'inline'      => true,
			'type'        => 'text',
			'placeholder' => '',
		);

		/* steps */

		$shepard_content = '&.extras-theme.shepherd-element .shepherd-content.shepherd-content';

		$this->controls['stepContentBackground'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => '--x-tour-background',
					'selector' => '.shepherd-content',
				),
				array(
					'property' => '--x-tour-background',
					'selector' => '.shepherd-arrow',
				),
			),
		);

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

		$this->controls['stepTitleTypography'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Typography', 'bricks' ) . ' (' . esc_html__( 'Title', 'bricks' ) . ')',
			'type'  => 'typography',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.shepherd-title',
				),
			),
		);

		$this->controls['stepContentPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => $shepard_content,
				),
			),
		);

		$this->controls['stepContentBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $shepard_content,
				),
			),
		);

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

		$this->controls['arrowSize'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Arrow size', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => '--x-tour-arrow-size',
					'selector' => '.extras-theme.shepherd-element',
				),
			),
		);

		/* close button */

		$close_button_selector = '&.shepherd-element .shepherd-cancel-icon';

		$this->controls['closeButtonSep'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Close button', 'bricks' ),
			'type'  => 'separator',
			'group' => 'steps',
		);

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

		$this->controls['closeButtonColor'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Color', 'bricks' ),
			'type'  => 'color',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $close_button_selector,
				),
			),
		);

		$this->controls['closeButtonSize'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Size', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'height',
					'selector' => '&.extras-theme.shepherd-element.shepherd-element .shepherd-cancel-icon:after',
				),
				array(
					'property' => 'height',
					'selector' => '&.extras-theme.shepherd-element.shepherd-element .shepherd-cancel-icon:before',
				),
			),
		);

		$this->controls['closeButtonBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $close_button_selector,
				),
			),
		);

		$this->controls['closeButtonBoxShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box Shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => $close_button_selector,
				),
			),
		);

		$this->controls['closeButtonPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => $close_button_selector,
				),
			),
		);

		$this->controls['closeButtonMargin'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'steps',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => $close_button_selector,
				),
			),
		);
	}

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {
		return array(
			'name'     => 'text-basic',
			'label'    => esc_html__( 'Text', 'bricks' ),
			'children' => array(),
		);
	}

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

	/**
	 * Render element output.
	 */
	public function render() {
		$settings = $this->settings;

		// Add data attributes for step configuration.
		if ( ! empty( $settings['stepId'] ) ) {
			$this->set_attribute( '_root', 'data-step-id', bricks_render_dynamic_data( $settings['stepId'] ) );
		}

		$advanced_options = array_filter(
			array(
				'stepTitle'       => ! empty( $settings['stepTitle'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['stepTitle'] ) ) : null,
				'buttonPrevText'  => ! empty( $settings['buttonPrevText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonPrevText'] ) ) : null,
				'buttonNextText'  => ! empty( $settings['buttonNextText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonNextText'] ) ) : null,
				'buttonCloseText' => ! empty( $settings['buttonCloseText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['buttonCloseText'] ) ) : null,
				'showButtons'     => isset( $settings['showButtons'] ) ? ! empty( $settings['showButtons'] ) : null,
			),
			function ( $value ) {
				return null !== $value;
			}
		);

		if ( ! empty( $advanced_options ) ) {
			$this->set_attribute( '_root', 'data-step-advanced', wp_json_encode( $advanced_options ) );
		}

		if ( ! empty( $settings['stepSelector'] ) ) {
			$this->set_attribute( '_root', 'data-step-selector', esc_attr( bricks_render_dynamic_data( $settings['stepSelector'] ) ) );
		}

		if ( ! empty( $settings['stepPosition'] ) ) {
			$this->set_attribute( '_root', 'data-step-position', esc_attr( $settings['stepPosition'] ) );
		}

		$highlight_element = ! empty( $settings['highlightElement'] ) ? esc_attr( $settings['highlightElement'] ) : 'inherit';

		if ( 'inherit' !== $highlight_element ) {
			$this->set_attribute( '_root', 'data-step-highlight', esc_attr( $highlight_element ) );
		}

		if ( ! empty( $settings['scrollTo'] ) ) {
			$this->set_attribute( '_root', 'data-step-scroll', 'true' );
		}

		// Add skip if target not found attribute.
		if ( ! empty( $settings['skipIfNoTarget'] ) ) {
			$this->set_attribute( '_root', 'data-skip-if-no-target', 'true' );
		}

		$output = '';

		// Render element with template tag.
		$output .= "<template {$this->render_attributes('_root')}>";

		// Render children elements.
		$output .= \Bricks\Frontend::render_children( $this );

		$output .= '</template>';

		echo $output;
	}


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

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

		<component
			class="x-page-tour-step shepherd-element extras-theme"
			v-show="!settings.builderHidden" 
		>

		<div aria-describedby="step-0-description" role="dialog" tabindex="0" class="shepherd-has-cancel-icon shepherd-element extras-theme shepherd-enabled" data-popper-placement="bottom">
		  
		<div class="shepherd-arrow" data-popper-arrow="" style="position: absolute; left: 50%; transform: translate3d(-50%, 0px, 0px);"></div>

		<div class="shepherd-content">
			<header class="shepherd-header">
			<contenteditable
				v-if="settings.stepTitle"
				tag="h3"
				class="shepherd-title"
				:name="name"
				controlKey="stepTitle"
				toolbar="style"
				:settings="settings"
			/>
				<button aria-label="Close Tour" class="shepherd-cancel-icon" type="button"><span aria-hidden="true">×</span></button>
			</header> 
			<div class="shepherd-text" id="step-0-description">
				<bricks-element-children :element="element" />
			</div> 
			<footer class="shepherd-footer">
				<button class="x-page-tour-button x-page-tour-button__back shepherd-button" tabindex="0">
					{{ settings.buttonPrevText ? settings.buttonPrevText : 'Back' }}
				</button>
				<button class="x-page-tour-button x-page-tour-button__next shepherd-button" tabindex="0">
					{{ settings.buttonNextText ? settings.buttonNextText : 'Next' }}
				</button>
				<button class="x-page-tour-button x-page-tour-button__complete shepherd-button" tabindex="0">
					{{ settings.buttonCloseText ? settings.buttonCloseText : 'Finish' }}
				</button>
			</footer>
			<div class="shepherd-progress-container">
				<div class="shepherd-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20"></div>
			</div>
		</div>

		</div>
			

		</component>

	</script>

		<?php
	}
}
