<?php
/**
 * Shortcode handler for 2FOX4 Before After.
 *
 * Usage:
 *   [bfas_before_after_slider before="URL" after="URL"]
 *   [bfas_before_after_slider before="URL" after="URL" start="30" orientation="vertical"
 *    label_before="Before" label_after="After" divider_color="#ffffff"
 *    hover="1" animate="1" css_class="my-class"]
 *
 * @package 2FOX4_Before_After
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class BFAS_Shortcode {

	/**
	 * Register the shortcode.
	 */
	public function init() {
		add_shortcode( 'bfas_before_after_slider', array( $this, 'render' ) );
	}

	/**
	 * Render the shortcode output.
	 *
	 * @param array $atts Shortcode attributes.
	 * @return string HTML output.
	 */
	public function render( $atts ) {
		$atts = shortcode_atts(
			array(
				'before'        => '',
				'after'         => '',
				'start'         => '50',
				'mode'          => 'slider',
				'orientation'   => 'horizontal',
				'label_before'  => '',
				'label_after'   => '',
				'divider_color' => '#ffffff',
				'hover'         => '0',
				'animate'       => '0',
				'css_class'     => '',
			),
			$atts,
			'bfas_before_after_slider'
		);

		$before_url = esc_url( $atts['before'] );
		$after_url  = esc_url( $atts['after'] );

		if ( empty( $before_url ) || empty( $after_url ) ) {
			return '';
		}

		wp_enqueue_style( 'bfas-frontend' );
		wp_enqueue_script( 'bfas-frontend' );

		return $this->build_html( $atts, $before_url, $after_url );
	}

	/**
	 * Get allowed HTML for wp_kses when outputting the slider SVG handle.
	 *
	 * @return array
	 */
	public static function get_kses_allowed_svg() {
		return array(
			'svg'      => array(
				'class'            => array(),
				'xmlns'            => array(),
				'viewbox'          => array(),
				'fill'             => array(),
				'stroke'           => array(),
				'stroke-width'     => array(),
				'stroke-linecap'   => array(),
				'stroke-linejoin'  => array(),
			),
			'polyline' => array(
				'points' => array(),
			),
		);
	}

	/**
	 * Get allowed HTML for wp_kses when outputting the full slider markup.
	 *
	 * @return array
	 */
	public static function get_kses_allowed_html() {
		return array(
			'div'      => array(
				'class'           => array(),
				'data-bfas-start' => array(),
				'data-bfas-hover' => array(),
				'data-bfas-animate' => array(),
				'style'           => array(),
			),
			'img'      => array(
				'src' => array(),
				'alt' => array(),
			),
			'span'     => array(
				'class' => array(),
			),
			'svg'      => array(
				'class'            => array(),
				'xmlns'            => array(),
				'viewbox'          => array(),
				'fill'             => array(),
				'stroke'           => array(),
				'stroke-width'     => array(),
				'stroke-linecap'   => array(),
				'stroke-linejoin'  => array(),
			),
			'polyline' => array(
				'points' => array(),
			),
		);
	}

	/**
	 * Build the slider HTML markup.
	 *
	 * @param array  $atts       Sanitized attributes.
	 * @param string $before_url Before image URL.
	 * @param string $after_url  After image URL.
	 * @return string
	 */
	public function build_html( $atts, $before_url, $after_url ) {
		$is_vertical   = ( 'vertical' === sanitize_text_field( $atts['orientation'] ) );
		$mode          = sanitize_text_field( $atts['mode'] );
		$is_reveal     = ( 'reveal' === $mode );
		$start         = max( 0, min( 100, absint( $atts['start'] ) ) );
		$hover         = ( '1' === $atts['hover'] ) ? '1' : '0';
		$animate       = ( '1' === $atts['animate'] ) ? '1' : '0';
		$divider_color = sanitize_hex_color( $atts['divider_color'] );
		$css_class     = sanitize_html_class( $atts['css_class'] );

		if ( empty( $divider_color ) ) {
			$divider_color = '#ffffff';
		}

		$classes = 'bfas-container';
		if ( $is_vertical ) {
			$classes .= ' bfas-vertical';
		}
		if ( $is_reveal ) {
			$classes .= ' bfas-reveal';
		}
		if ( ! empty( $css_class ) ) {
			$classes .= ' ' . $css_class;
		}

		$label_before = sanitize_text_field( $atts['label_before'] );
		$label_after  = sanitize_text_field( $atts['label_after'] );

		$arrow_svg = '<svg class="bfas-handle-arrows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#333333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">';
		if ( $is_vertical ) {
			$arrow_svg .= '<polyline points="6 9 12 3 18 9"></polyline><polyline points="6 15 12 21 18 15"></polyline>';
		} else {
			$arrow_svg .= '<polyline points="9 6 3 12 9 18"></polyline><polyline points="15 6 21 12 15 18"></polyline>';
		}
		$arrow_svg .= '</svg>';

		ob_start();
		?>
		<div class="<?php echo esc_attr( $classes ); ?>"
			data-bfas-start="<?php echo esc_attr( $start ); ?>"
			data-bfas-hover="<?php echo esc_attr( $hover ); ?>"
			data-bfas-animate="<?php echo esc_attr( $animate ); ?>"
			style="--bfas-divider-color: <?php echo esc_attr( $divider_color ); ?>;"
		>
			<div class="bfas-after">
				<img src="<?php echo esc_url( $after_url ); ?>" alt="<?php esc_attr_e( 'After', '2fox4-before-after' ); ?>" />
			</div>
			<div class="bfas-before">
				<img src="<?php echo esc_url( $before_url ); ?>" alt="<?php esc_attr_e( 'Before', '2fox4-before-after' ); ?>" />
			</div>
			<div class="bfas-divider"></div>
			<div class="bfas-handle">
				<?php
				echo wp_kses( $arrow_svg, self::get_kses_allowed_svg() );
				?>
			</div>
			<?php if ( ! empty( $label_before ) ) : ?>
				<span class="bfas-label bfas-label-before"><?php echo esc_html( $label_before ); ?></span>
			<?php endif; ?>
			<?php if ( ! empty( $label_after ) ) : ?>
				<span class="bfas-label bfas-label-after"><?php echo esc_html( $label_after ); ?></span>
			<?php endif; ?>
		</div>
		<?php
		return ob_get_clean();
	}
}