<?php
/**
 * Frontend CSS generation for the timeline block.
 *
 * This class is the canonical source of truth for how block attributes become
 * CSS. The editor mirrors it in src/blocks/timeline-block/style.js; the two
 * must be changed together.
 *
 * @package advanced-timeline-block
 */

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

/**
 * Turns timeline block attributes into a stylesheet.
 */
class ATLB_Styles {

	/**
	 * Breakpoints, in the order the rules are emitted.
	 */
	const MEDIA = array(
		'desktop' => '@media only screen and (min-width: 1025px)',
		'tablet'  => '@media only screen and (min-width: 768px) and (max-width: 1024px)',
		'mobile'  => '@media only screen and (max-width: 767px)',
	);

	/**
	 * Border styles the block offers. Anything else is dropped rather than
	 * being interpolated into a declaration.
	 */
	const BORDER_STYLES = array(
		'none',
		'solid',
		'dotted',
		'dashed',
		'double',
		'groove',
		'ridge',
		'inset',
		'outset',
	);

	/**
	 * Layout attribute values, keyed by device. Used both to validate the
	 * value before it reaches a selector and to know which alignment it is.
	 */
	const LAYOUTS = array(
		'desktop' => array( 'desk_left_layout', 'desk_center_layout', 'desk_right_layout' ),
		'tablet'  => array( 'tab_left_layout', 'tab_center_layout', 'tab_right_layout' ),
		'mobile'  => array( 'mob_left_layout', 'mob_center_layout', 'mob_right_layout' ),
	);

	/**
	 * Default values, mirroring block.json. Kept here so that blocks saved
	 * before an attribute existed still render the same as a fresh one.
	 *
	 * @return array
	 */
	public static function defaults() {
		return array(
			'layout'              => array(
				'desktop' => 'desk_center_layout',
				'tablet'  => 'tab_center_layout',
				'mobile'  => 'mob_left_layout',
			),
			'verticalSpacing'     => array(
				'desktop' => 30,
				'tablet'  => 30,
				'mobile'  => 15,
			),
			'contentPadding'      => array(
				'desktop' => self::box( 20, true ),
				'tablet'  => self::box( 15, true ),
				'mobile'  => self::box( 10, true ),
			),
			// Flat, not per-device: the frontend has only ever rendered the
			// desktop value at every breakpoint (see date_rule() below), so
			// tablet/mobile date padding controls have been removed rather
			// than kept as dead UI.
			'datePadding'         => self::box( 10, true ),
			'contentBorder'       => array(
				'style'  => 'solid',
				'color'  => '#406343',
				'radius' => 0,
				'width'  => self::box( 1, true ),
			),
			'dateNameBorder'      => array(
				'style'  => 'solid',
				'color'  => '#406343',
				'radius' => 0,
				'width'  => self::box( 1, true ),
			),
			'markerBorder'        => array(
				'style'  => 'solid',
				'width'  => 1,
				'color'  => '#406343',
				'radius' => 50,
			),
			'markerSize'          => array(
				'desktop' => 15,
				'tablet'  => 15,
				'mobile'  => 15,
			),
			'markerContainerSize' => array(
				'desktop' => 25,
				'tablet'  => 25,
				'mobile'  => 25,
			),
			'connector'           => array(
				'color'     => '#406343',
				'thickness' => 2,
			),
			'contentBg'           => null,
			'markerColor'         => '#406343',
			// Null rather than #ffffff on purpose: when the attribute is absent
			// the stylesheet's own `background: #fff` should win, exactly as it
			// did before. Emitting a higher-specificity declaration here would
			// override themes that restyle the marker.
			'markerBg'            => null,
			'dateNameColor'       => null,
			'dateNameBg'          => null,
			'zindex'              => null,
		);
	}

	/**
	 * Build a four-sided box value.
	 *
	 * @param mixed $value  Value for every side and for the linked value.
	 * @param bool  $linked Whether the sides start linked.
	 * @return array
	 */
	private static function box( $value, $linked ) {
		return array(
			'top'    => $value,
			'right'  => $value,
			'bottom' => $value,
			'left'   => $value,
			'linked' => $linked,
			'value'  => $value,
		);
	}

	/**
	 * Accept either the pre-2.2 flat attributes or the grouped ones and return
	 * the grouped shape.
	 *
	 * Both shapes have to be supported indefinitely: the `render_block` filter
	 * receives attributes straight from the block comment, so a post that is
	 * never re-opened in the editor keeps its flat keys forever. Gutenberg also
	 * only serialises non-default attributes, so any key may simply be absent.
	 *
	 * @param array $attrs Raw block attributes.
	 * @return array Grouped attributes, with every key present.
	 */
	public static function normalize( $attrs ) {
		$attrs  = is_array( $attrs ) ? $attrs : array();
		$out    = self::defaults();
		$has    = static function ( $key ) use ( $attrs ) {
			return isset( $attrs[ $key ] );
		};
		$devices = array(
			'desktop' => array( 'desk', 'D' ),
			'tablet'  => array( 'tab', 'T' ),
			'mobile'  => array( 'mob', 'M' ),
		);

		// Layout is still stored flat (it is part of the saved markup).
		foreach ( $devices as $device => $prefixes ) {
			list( $prefix ) = $prefixes;
			$key            = $prefix . 'Layout';

			if ( $has( $key ) && in_array( $attrs[ $key ], self::LAYOUTS[ $device ], true ) ) {
				$out['layout'][ $device ] = $attrs[ $key ];
			}
		}

		// Scalars are stored flat in both shapes.
		foreach ( array( 'contentBg', 'markerColor', 'markerBg', 'dateNameColor', 'dateNameBg', 'zindex' ) as $key ) {
			if ( $has( $key ) ) {
				$out[ $key ] = $attrs[ $key ];
			}
		}

		// Legacy flat keys are folded in first so that the grouped shape, which
		// is what a migrated block stores, always wins over any leftovers.
		foreach ( $devices as $device => $prefixes ) {
			list( $prefix, $letter ) = $prefixes;

			if ( $has( $prefix . 'VerticalSpacing' ) ) {
				$out['verticalSpacing'][ $device ] = $attrs[ $prefix . 'VerticalSpacing' ];
			}
			if ( $has( $prefix . 'MarkerSize' ) ) {
				$out['markerSize'][ $device ] = $attrs[ $prefix . 'MarkerSize' ];
			}
			if ( $has( $prefix . 'MarkerContainerSize' ) ) {
				$out['markerContainerSize'][ $device ] = $attrs[ $prefix . 'MarkerContainerSize' ];
			}

			$out['contentPadding'][ $device ] = self::legacy_box(
				$out['contentPadding'][ $device ],
				$attrs,
				'content' . $letter . '%sPadding',
				'enableContent' . $letter . 'linkedPadding',
				'content' . $letter . 'linkedPadding',
				false
			);
		}

		// Date padding only ever had a desktop (D) reading on the frontend, so
		// only the D-prefixed legacy keys are folded in; the T/M legacy values
		// were always dead and are intentionally dropped here.
		$out['datePadding'] = self::legacy_box(
			$out['datePadding'],
			$attrs,
			'dateD%sPadding',
			'enableDateDlinkedPadding',
			'dateDlinkedPadding',
			false
		);

		$out['contentBorder'] = self::legacy_border(
			$out['contentBorder'],
			$attrs,
			'contentBorderStyle',
			'contentBorderColor',
			'contentBorderRadius',
			'contentBorder%sWidth',
			'enableLinkedBorder',
			'contentBorderLinkedWidth'
		);
		$out['dateNameBorder'] = self::legacy_border(
			$out['dateNameBorder'],
			$attrs,
			'dateNameBorderStyle',
			'dateNameBorderColor',
			'dateNameBorderRadius',
			'dateNameBorder%sWidth',
			'enableDateNameLinkedBorder',
			'dateNameBorderLinkedWidth'
		);

		foreach ( array(
			'markerBorderStyle'  => 'style',
			'markerBorderWidth'  => 'width',
			'markerBorderColor'  => 'color',
			'markerBorderRadius' => 'radius',
		) as $legacy => $key ) {
			if ( $has( $legacy ) ) {
				$out['markerBorder'][ $key ] = $attrs[ $legacy ];
			}
		}

		if ( $has( 'connectorColor' ) ) {
			$out['connector']['color'] = $attrs['connectorColor'];
		}
		if ( $has( 'connectorThickness' ) ) {
			$out['connector']['thickness'] = $attrs['connectorThickness'];
		}

		// Grouped shape last: it is the current format and takes precedence.
		foreach ( array( 'contentPadding', 'datePadding', 'contentBorder', 'dateNameBorder', 'markerBorder', 'markerSize', 'markerContainerSize', 'verticalSpacing', 'connector' ) as $key ) {
			if ( $has( $key ) && is_array( $attrs[ $key ] ) ) {
				$out[ $key ] = self::merge( $out[ $key ], $attrs[ $key ] );
			}
		}

		return $out;
	}

	/**
	 * Shallow-merge a grouped value over its defaults, one level deep.
	 *
	 * @param array $defaults Default values.
	 * @param array $value    Stored values.
	 * @return array
	 */
	private static function merge( $defaults, $value ) {
		foreach ( $value as $key => $item ) {
			if ( isset( $defaults[ $key ] ) && is_array( $defaults[ $key ] ) && is_array( $item ) ) {
				$defaults[ $key ] = array_merge( $defaults[ $key ], $item );
			} else {
				$defaults[ $key ] = $item;
			}
		}

		return $defaults;
	}

	/**
	 * Fold the legacy per-side padding keys into a box value.
	 *
	 * @param array  $box          Current box value.
	 * @param array  $attrs        Raw attributes.
	 * @param string $side_pattern sprintf pattern for the per-side key.
	 * @param string $linked_key   Legacy linked-toggle key.
	 * @param string $value_key    Legacy linked-value key.
	 * @param bool   $ucfirst_side Whether the side is capitalised in the key.
	 *                             Padding keys are contentDtopPadding (lower)
	 *                             while border keys are contentBorderTopWidth
	 *                             (upper), so this cannot be assumed.
	 * @return array
	 */
	private static function legacy_box( $box, $attrs, $side_pattern, $linked_key, $value_key, $ucfirst_side = true ) {
		foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
			$key = sprintf( $side_pattern, $ucfirst_side ? ucfirst( $side ) : $side );

			if ( isset( $attrs[ $key ] ) ) {
				$box[ $side ] = $attrs[ $key ];
			}
		}

		if ( isset( $attrs[ $linked_key ] ) ) {
			$box['linked'] = (bool) $attrs[ $linked_key ];
		}
		if ( isset( $attrs[ $value_key ] ) ) {
			$box['value'] = $attrs[ $value_key ];
		}

		return $box;
	}

	/**
	 * Fold the legacy border keys into a grouped border value.
	 *
	 * @param array  $border       Current border value.
	 * @param array  $attrs        Raw attributes.
	 * @param string $style_key    Legacy style key.
	 * @param string $color_key    Legacy colour key.
	 * @param string $radius_key   Legacy radius key.
	 * @param string $side_pattern sprintf pattern for the per-side width key.
	 * @param string $linked_key   Legacy linked-toggle key.
	 * @param string $value_key    Legacy linked-width key.
	 * @return array
	 */
	private static function legacy_border( $border, $attrs, $style_key, $color_key, $radius_key, $side_pattern, $linked_key, $value_key ) {
		if ( isset( $attrs[ $style_key ] ) ) {
			$border['style'] = $attrs[ $style_key ];
		}
		if ( isset( $attrs[ $color_key ] ) ) {
			$border['color'] = $attrs[ $color_key ];
		}
		if ( isset( $attrs[ $radius_key ] ) ) {
			$border['radius'] = $attrs[ $radius_key ];
		}

		$border['width'] = self::legacy_box( $border['width'], $attrs, $side_pattern, $linked_key, $value_key );

		return $border;
	}

	/**
	 * Make a value safe to place inside a declaration.
	 *
	 * Colours may legitimately be hex, rgb()/hsl(), a named colour or a
	 * `var(--wp--preset--color--*)` reference from a theme palette, so this
	 * deliberately does not force hex. It only removes the characters that
	 * could terminate the declaration, rule or <style> element.
	 *
	 * @param mixed $value Raw value.
	 * @return string
	 */
	public static function css_value( $value ) {
		if ( ! is_scalar( $value ) ) {
			return '';
		}

		$value = preg_replace( '/[;{}<>\\\\]/', '', (string) $value );
		$value = trim( $value );

		// Anything that could pull in an external resource or run script.
		if ( preg_match( '/(url\s*\(|@import|expression\s*\(|javascript:)/i', $value ) ) {
			return '';
		}

		return $value;
	}

	/**
	 * Coerce a length to a plain number.
	 *
	 * @param mixed $value    Raw value.
	 * @param float $fallback Used when the value is not numeric.
	 * @return float
	 */
	public static function num( $value, $fallback = 0 ) {
		return is_numeric( $value ) ? (float) $value : (float) $fallback;
	}

	/**
	 * Validate a border style.
	 *
	 * @param mixed $value Raw value.
	 * @return string Empty string when unrecognised.
	 */
	public static function border_style( $value ) {
		return in_array( $value, self::BORDER_STYLES, true ) ? $value : '';
	}

	/**
	 * Render a box value as a CSS shorthand, in top right bottom left order.
	 *
	 * @param array  $box  Box value.
	 * @param string $unit Unit suffix.
	 * @return string
	 */
	private static function box_shorthand( $box, $unit = 'px' ) {
		if ( ! empty( $box['linked'] ) ) {
			return self::num( $box['value'] ) . $unit;
		}

		return sprintf(
			'%s%s %s%s %s%s %s%s',
			self::num( $box['top'] ),
			$unit,
			self::num( $box['right'] ),
			$unit,
			self::num( $box['bottom'] ),
			$unit,
			self::num( $box['left'] ),
			$unit
		);
	}

	/**
	 * Generate the stylesheet for one block instance.
	 *
	 * @param array $attrs Raw block attributes.
	 * @return string CSS, or an empty string when the block has no id.
	 */
	public static function generate( $attrs ) {
		$id = isset( $attrs['id'] ) ? sanitize_html_class( $attrs['id'] ) : '';

		if ( '' === $id ) {
			return '';
		}

		$a    = self::normalize( $attrs );
		$base = '.wp-block-atlb-timeline-block.' . $id;
		$css  = '';

		// z-index.
		if ( null !== $a['zindex'] && '' !== $a['zindex'] && is_numeric( $a['zindex'] ) ) {
			$css .= $base . '{z-index:' . (int) $a['zindex'] . ';}';
		}

		$css .= self::content_rule( $base, $a );
		$css .= self::marker_rule( $base, $a );
		$css .= self::connector_rule( $base, $a );
		$css .= self::date_rule( $base, $a );

		foreach ( self::MEDIA as $device => $query ) {
			$css .= $query . '{' . self::device_rules( $base, $a, $device ) . '}';
		}

		return $css;
	}

	/**
	 * Breakpoint-independent rules for the content box.
	 *
	 * @param string $base Base selector.
	 * @param array  $a    Normalized attributes.
	 * @return string
	 */
	private static function content_rule( $base, $a ) {
		$border = $a['contentBorder'];
		$style  = self::border_style( $border['style'] );
		$css    = $base . ' .timeline__content{';
		$css   .= 'border-radius:' . self::num( $border['radius'] ) . 'px;';

		if ( $style && 'none' !== $style ) {
			$css .= 'border-color:' . self::css_value( $border['color'] ) . ';';
			$css .= 'border-style:' . $style . ';';
			$css .= 'border-width:' . self::box_shorthand( $border['width'] ) . ';';
		}

		if ( null !== $a['contentBg'] ) {
			$css .= 'background-color:' . self::css_value( $a['contentBg'] ) . ';';
		}

		return $css . '}';
	}

	/**
	 * Breakpoint-independent rules for the marker icon.
	 *
	 * @param string $base Base selector.
	 * @param array  $a    Normalized attributes.
	 * @return string
	 */
	private static function marker_rule( $base, $a ) {
		$border = $a['markerBorder'];
		$style  = self::border_style( $border['style'] );
		$css    = $base . ' .timeline__marker i{';
		$css   .= 'display:block;';
		$css   .= 'border-radius:' . self::num( $border['radius'] ) . 'px;';

		if ( $style && 'none' !== $style ) {
			$css .= 'border-color:' . self::css_value( $border['color'] ) . ';';
			$css .= 'border-style:' . $style . ';';
			$css .= 'border-width:' . self::num( $border['width'] ) . 'px;';
		}

		$css .= 'color:' . self::css_value( $a['markerColor'] ) . ';';

		if ( null !== $a['markerBg'] ) {
			$css .= 'background:' . self::css_value( $a['markerBg'] ) . ';';
		}

		$css .= '}';

		// Icons are inline SVG (or a Font Awesome <i> swapped for one at
		// render time); size them in em so the font-size based sizing of the
		// <i> element keeps working for both.
		$css .= $base . ' .timeline__marker i svg{'
			. 'width:1em;'
			. 'height:1em;'
			. 'fill:currentColor;'
			. 'display:inline-block;'
			. 'vertical-align:middle;'
			. '}';

		return $css;
	}

	/**
	 * The vertical connector line.
	 *
	 * @param string $base Base selector.
	 * @param array  $a    Normalized attributes.
	 * @return string
	 */
	private static function connector_rule( $base, $a ) {
		$thickness = self::num( $a['connector']['thickness'], 2 );

		return $base . ' .timeline__bar{'
			. 'background:' . self::css_value( $a['connector']['color'] ) . ';'
			. 'width:' . $thickness . 'px;'
			. 'margin-left:-' . ( $thickness / 2 ) . 'px;'
			. '}';
	}

	/**
	 * Breakpoint-independent rules for the date/name box.
	 *
	 * `datePadding` is a single box, not per-device: it was never responsive
	 * on the frontend (only the desktop value ever rendered, at every
	 * breakpoint), so there is no tablet/mobile value to read here.
	 *
	 * @param string $base Base selector.
	 * @param array  $a    Normalized attributes.
	 * @return string
	 */
	private static function date_rule( $base, $a ) {
		$border = $a['dateNameBorder'];
		$style  = self::border_style( $border['style'] );
		$css    = $base . ' .time__date_content{';
		$css   .= 'border-radius:' . self::num( $border['radius'] ) . 'px;';

		if ( $style && 'none' !== $style ) {
			$css .= 'border-color:' . self::css_value( $border['color'] ) . ';';
			$css .= 'border-style:' . $style . ';';
			$css .= 'border-width:' . self::box_shorthand( $border['width'] ) . ';';
		}

		$css .= 'padding:' . self::box_shorthand( $a['datePadding'] ) . ';';

		if ( null !== $a['dateNameBg'] ) {
			$css .= 'background-color:' . self::css_value( $a['dateNameBg'] ) . ';';
		}
		if ( null !== $a['dateNameColor'] ) {
			$css .= 'color:' . self::css_value( $a['dateNameColor'] ) . ';';
		}

		return $css . '}';
	}

	/**
	 * Rules that live inside one breakpoint's media query.
	 *
	 * @param string $base   Base selector.
	 * @param array  $a      Normalized attributes.
	 * @param string $device Device key.
	 * @return string
	 */
	private static function device_rules( $base, $a, $device ) {
		$padding   = $a['contentPadding'][ $device ];
		$icon_size = self::num( $a['markerSize'][ $device ], 15 );
		$container = self::num( $a['markerContainerSize'][ $device ], 25 );
		$layout    = $a['layout'][ $device ];

		$css = $base . '{row-gap:' . self::num( $a['verticalSpacing'][ $device ] ) . 'px;}';

		$css .= $base . ' .timeline__content{';
		if ( ! empty( $padding['linked'] ) ) {
			$css .= 'padding:' . self::num( $padding['value'] ) . 'px;';
		} else {
			$css .= 'padding-top:' . self::num( $padding['top'] ) . 'px;';
			$css .= 'padding-right:' . self::num( $padding['right'] ) . 'px;';
			$css .= 'padding-bottom:' . self::num( $padding['bottom'] ) . 'px;';
			$css .= 'padding-left:' . self::num( $padding['left'] ) . 'px;';
		}
		$css .= '}';

		$css .= $base . ' .timeline__marker i{'
			. 'font-size:' . $icon_size . 'px;'
			. 'width:' . $container . 'px;'
			. 'height:' . $container . 'px;'
			. 'line-height:' . $container . 'px;'
			. '}';

		// Only the left and right layouts pull the marker onto the line.
		$offset = $container / 2;

		if ( in_array( $layout, self::LAYOUTS[ $device ], true ) ) {
			if ( false !== strpos( $layout, '_left_' ) ) {
				$css .= $base . '.' . $layout . ' .timeline__marker i{'
					. 'margin-left:-' . $offset . 'px;'
					. 'margin-top:-' . $offset . 'px;'
					. '}';
			} elseif ( false !== strpos( $layout, '_right_' ) ) {
				$css .= $base . '.' . $layout . ' .timeline__marker i{'
					. 'margin-right:-' . $offset . 'px;'
					. 'margin-top:-' . $offset . 'px;'
					. '}';
			}
		}

		return $css;
	}
}