<?php
/**
 * Firma de la agencia para el pie: shortcode [ct_logo_flex].
 *
 * Es el port del componente <LogoFlex /> de los sitios en Next: el isotipo que
 * gira al pasar el mouse y, al lado, una ventanita angosta donde corren las
 * palabras de la agencia.
 *
 * Allá el loop lo maneja GSAP (horizontalLoop), acá no hace falta: el original
 * mueve cada palabra por separado y las recicla cuando salen de cuadro, pero el
 * resultado visible es el mismo que corriendo una tira duplicada con
 * translateX, que es lo que ya hacen los otros dos marquees del tema
 * (inc/marquee.php y inc/marquee-pie.php). Sin JS ni librería en el front.
 *
 * Se registra como shortcode y no como hook para poder meterlo en un widget del
 * footer y moverlo de lugar sin tocar PHP, igual que [ct_marquee_pie].
 *
 * Uso mínimo:
 *
 *   [ct_logo_flex]
 *
 * Con todo cambiado:
 *
 *   [ct_logo_flex url="https://www.flexmkt.com.ar" velocidad="14" ancho="16rem"
 *                 tamano="0.9rem" color="#f6c256" borde="transparent"
 *                 palabras="FLEX, MKT, AGENCY, *, SOMOS, TU, EQUIPO"]
 *
 * @package CoffeTiggerTheme
 */

defined( 'ABSPATH' ) || exit;

/**
 * Las palabras que corren si el shortcode no trae otras.
 *
 * El asterisco se escribe como "*" y se dibuja como SVG (ver el render): en el
 * componente original es un icono, no un carácter, y el "*" de las tipografías
 * de texto se sienta arriba de la línea en vez de al medio.
 *
 * @return string[]
 */
function ct_logo_flex_palabras() {
	return (array) apply_filters(
		'ct_logo_flex_palabras',
		array( 'FLEX', 'MKT', 'AGENCY', '*', 'SOMOS', 'TU', 'DEPARTAMENTO', 'DE', 'MARKETING', '*' )
	);
}

/**
 * Limpia un valor que va a terminar dentro del atributo style.
 *
 * Mismo criterio que ct_marquee_pie_css(): esc_attr() evita que se escape del
 * atributo, no que se escape de la declaración. Un punto y coma en `ancho`
 * mete una propiedad CSS de más. Los paréntesis se dejan pasar porque sin
 * ellos no hay clamp(), var() ni rgba(), que es justo lo que uno quiere poder
 * escribir en `ancho`, `tamano` o `borde`.
 *
 * @param string $valor
 * @return string
 */
function ct_logo_flex_css( $valor ) {
	return trim( str_replace( array( ';', '"', "'", '{', '}', '<', '>' ), '', (string) $valor ) );
}

add_shortcode( 'ct_logo_flex', 'ct_logo_flex_shortcode' );

/**
 * @param array $atts Atributos del shortcode.
 * @return string
 */
function ct_logo_flex_shortcode( $atts ) {
	$atts = shortcode_atts(
		array(
			'url'        => 'https://www.flexmkt.com.ar',
			// Vacío = el logo que vive en el tema. Se puede apuntar a una
			// imagen de la biblioteca pasando su URL.
			'logo'       => '',
			'alt'        => 'Flex MKT Agency',
			// Separadas por coma. Un "*" suelto se dibuja como asterisco.
			'palabras'   => '',
			// Segundos por vuelta. Más chico = más rápido.
			'velocidad'  => 16,
			// Cuántas veces se repite la tanda dentro de cada copia. Con la
			// lista larga por defecto alcanza una; si dejás tres palabras hay
			// que subirlo o se ve el hueco.
			'repeticion' => 1,
			// Ancho de la ventana por donde se ve pasar el texto.
			'ancho'      => '12.5rem',
			'tamano'     => '0.8rem',
			'color'      => '',
			'fondo'      => '',
			'borde'      => '',
			// Ancho del fundido de cada punta.
			'fundido'    => '10%',
			'target'     => '_blank',
		),
		$atts,
		'ct_logo_flex'
	);

	$palabras = array_filter( array_map( 'trim', explode( ',', (string) $atts['palabras'] ) ) );

	if ( ! $palabras ) {
		$palabras = ct_logo_flex_palabras();
	}

	if ( ! $palabras ) {
		return '';
	}

	$velocidad  = max( 3, min( 120, (int) $atts['velocidad'] ) );
	$repeticion = max( 1, min( 20, (int) $atts['repeticion'] ) );

	/* El asterisco de react-icons (FaAsterisk), como SVG inline: es una sola
	   forma, no justifica ni una fuente de iconos ni un request. currentColor
	   para que siga al color del texto sin configurarlo dos veces. */
	$asterisco = '<svg class="logo-flex__asterisco" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true" focusable="false">'
		. '<path d="M192 32c17.7 0 32 14.3 32 32v135.5l111.5-66.9c15.2-9.1 34.8-4.2 43.9 11s4.2 34.8-11 43.9L254.2 256l114.2 68.6c15.2 9.1 20.1 28.7 11 43.9s-28.7 20.1-43.9 11L224 312.5V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V312.5L48.5 379.4c-15.2 9.1-34.8 4.2-43.9-11s-4.2-34.8 11-43.9L129.8 256 15.6 187.4c-15.2-9.1-20.1-28.7-11-43.9s28.7-20.1 43.9-11L160 199.5V64c0-17.7 14.3-32 32-32z"/>'
		. '</svg>';

	/* Un solo grupo armado una vez y escupido dos veces: las dos copias que
	   necesita la animación son idénticas por construcción y el loop no salta.
	   Mismo criterio que en los otros dos marquees. */
	$grupo = '';
	for ( $i = 0; $i < $repeticion; $i++ ) {
		foreach ( $palabras as $palabra ) {
			$contenido = ( '*' === $palabra ) ? $asterisco : esc_html( $palabra );
			$grupo    .= '<span class="logo-flex__item">' . $contenido . '</span>';
		}
	}

	/* Las variables van en el style del contenedor y no en un <style> por
	   instancia: así dos firmas con distinta configuración en la misma página
	   no se pisan. */
	$vars = array(
		'--logo-flex-speed: ' . $velocidad . 's',
		'--logo-flex-ancho: ' . ct_logo_flex_css( $atts['ancho'] ),
		'--logo-flex-size: ' . ct_logo_flex_css( $atts['tamano'] ),
		'--logo-flex-fade: ' . ct_logo_flex_css( $atts['fundido'] ),
	);

	foreach ( array(
		'color' => '--logo-flex-fg',
		'fondo' => '--logo-flex-bg',
		'borde' => '--logo-flex-borde',
	) as $att => $var ) {
		if ( $atts[ $att ] ) {
			$vars[] = $var . ': ' . ct_logo_flex_css( $atts[ $att ] );
		}
	}

	$logo = $atts['logo'] ? $atts['logo'] : get_stylesheet_directory_uri() . '/assets/img/logoflex.webp';

	/* El ancho y el alto van fijos en el atributo, no sólo en el CSS: sin
	   ellos el navegador no sabe cuánto lugar reservar y el footer salta
	   cuando entra la imagen. */
	$img = sprintf(
		'<img class="logo-flex__logo" src="%s" alt="%s" width="36" height="36" loading="lazy" decoding="async">',
		esc_url( $logo ),
		esc_attr( $atts['alt'] )
	);

	/* El nombre accesible del enlace sale del alt de la imagen. La cinta va
	   aria-hidden entera: son las mismas palabras dando vueltas, no
	   información, y leerlas al final de cada página es ruido. */
	return sprintf(
		'<a class="logo-flex" href="%1$s" target="%2$s" rel="noopener noreferrer" style="%3$s">
			%4$s
			<span class="logo-flex__marquee" aria-hidden="true">
				<span class="logo-flex__track">
					<span class="logo-flex__grupo">%5$s</span>
					<span class="logo-flex__grupo">%5$s</span>
				</span>
			</span>
		</a>',
		esc_url( $atts['url'] ),
		esc_attr( '_blank' === $atts['target'] ? '_blank' : '_self' ),
		esc_attr( implode( ';', $vars ) ),
		$img, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- armado arriba con esc_url/esc_attr.
		$grupo // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- cada palabra ya pasó por esc_html().
	);
}
