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

$client_id = ! empty( $attributes['clientId'] ) ? str_replace( array( ';', '=', '(', ')', ' ' ), '', wp_strip_all_tags( $attributes['clientId'] ) ) : '';
$block_id  = 'vidplex_' . str_replace( '-', '_', esc_attr( $client_id ) );

$styles = array(
	'padding' => array(
		'desktop' => isset( $attributes['padding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['padding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['padding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['padding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['padding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['padding']['mobile'] ) ) : '',
	),
	'margin'  => isset( $attributes['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['margin'] ) ) : '',
	'border'  => isset( $attributes['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['margin'] ) ) : '',
	'radius'  => isset( $attributes['radius'] ) ? esc_attr( $attributes['radius'] ) : '',
	'color'   => array(
		'bg' => isset( $attributes['color']['bg'] ) ? esc_attr( $attributes['color']['bg'] ) : '',
	),
);

$logo_styles = array(
	'margin' => isset( $attributes['logo']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['logo']['margin'] ) ) : '',
	'width'  => array(
		'desktop' => isset( $attributes['logo']['width']['desktop'] ) ? esc_attr( $attributes['logo']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['logo']['width']['tablet'] ) ? esc_attr( $attributes['logo']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['logo']['width']['mobile'] ) ? esc_attr( $attributes['logo']['width']['mobile'] ) : '',
	),
	'height' => array(
		'desktop' => isset( $attributes['logo']['height']['desktop'] ) ? esc_attr( $attributes['logo']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['logo']['height']['tablet'] ) ? esc_attr( $attributes['logo']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['logo']['height']['mobile'] ) ? esc_attr( $attributes['logo']['height']['mobile'] ) : '',
	),
	'fit'    => isset( $attributes['logo']['fit'] ) ? esc_attr( $attributes['logo']['fit'] ) : '',
	'radius' => isset( $attributes['logo']['radius'] ) ? esc_attr( $attributes['logo']['radius'] ) : '',
);

$title_styles = array(
	'margin'         => isset( $attributes['title']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['title']['margin'] ) ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['title']['font']['size']['desktop'] ) ? esc_attr( $attributes['title']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['title']['font']['size']['tablet'] ) ? esc_attr( $attributes['title']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['title']['font']['size']['mobile'] ) ? esc_attr( $attributes['title']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['title']['font']['weight'] ) ? esc_attr( $attributes['title']['font']['weight'] ) : '',
		'family' => isset( $attributes['title']['font']['family'] ) ? esc_attr( $attributes['title']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['title']['letterCase'] ) ? esc_attr( $attributes['title']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['title']['decoration'] ) ? esc_attr( $attributes['title']['decoration'] ) : '',
	'line_height'    => isset( $attributes['title']['lineHeight'] ) ? esc_attr( $attributes['title']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['title']['letterSpacing'] ) ? esc_attr( $attributes['title']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['title']['color']['text'] ) ? esc_attr( $attributes['title']['color']['text'] ) : '',
	),
);

$handle_styles = array(
	'margin'         => isset( $attributes['handle']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['handle']['margin'] ) ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['handle']['font']['size']['desktop'] ) ? esc_attr( $attributes['handle']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['handle']['font']['size']['tablet'] ) ? esc_attr( $attributes['handle']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['handle']['font']['size']['mobile'] ) ? esc_attr( $attributes['handle']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['handle']['font']['weight'] ) ? esc_attr( $attributes['handle']['font']['weight'] ) : '',
		'family' => isset( $attributes['handle']['font']['family'] ) ? esc_attr( $attributes['handle']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['handle']['letterCase'] ) ? esc_attr( $attributes['handle']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['handle']['decoration'] ) ? esc_attr( $attributes['handle']['decoration'] ) : '',
	'line_height'    => isset( $attributes['handle']['lineHeight'] ) ? esc_attr( $attributes['handle']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['handle']['letterSpacing'] ) ? esc_attr( $attributes['handle']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['handle']['color']['text'] ) ? esc_attr( $attributes['handle']['color']['text'] ) : '',
	),
);

$meta_styles = array(
	'gap'            => isset( $attributes['meta']['gap'] ) ? esc_attr( $attributes['meta']['gap'] ) : '',
	'row_gap'        => isset( $attributes['meta']['rowGap'] ) ? esc_attr( $attributes['meta']['rowGap'] ) : '',
	'margin'         => isset( $attributes['meta']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['meta']['margin'] ) ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['meta']['font']['size']['desktop'] ) ? esc_attr( $attributes['meta']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['meta']['font']['size']['tablet'] ) ? esc_attr( $attributes['meta']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['meta']['font']['size']['mobile'] ) ? esc_attr( $attributes['meta']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['meta']['font']['weight'] ) ? esc_attr( $attributes['meta']['font']['weight'] ) : '',
		'family' => isset( $attributes['meta']['font']['family'] ) ? esc_attr( $attributes['meta']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['meta']['letterCase'] ) ? esc_attr( $attributes['meta']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['meta']['decoration'] ) ? esc_attr( $attributes['meta']['decoration'] ) : '',
	'line_height'    => isset( $attributes['meta']['lineHeight'] ) ? esc_attr( $attributes['meta']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['meta']['letterSpacing'] ) ? esc_attr( $attributes['meta']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['meta']['color']['text'] ) ? esc_attr( $attributes['meta']['color']['text'] ) : '',
	),
);

$btn_styles = array(
	'align'          => isset( $attributes['btn']['align'] ) ? esc_attr( $attributes['btn']['align'] ) : '',
	'padding'        => array(
		'desktop' => isset( $attributes['btn']['padding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['btn']['padding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['btn']['padding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['btn']['padding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['btn']['padding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['btn']['padding']['mobile'] ) ) : '',
	),
	'margin'         => isset( $attributes['btn']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['btn']['margin'] ) ) : '',
	'border'         => isset( $attributes['btn']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['btn']['border'] ) ) : '',
	'radius'         => isset( $attributes['btn']['radius'] ) ? esc_attr( $attributes['btn']['radius'] ) : '',
	'width'          => array(
		'desktop' => isset( $attributes['btn']['width']['desktop'] ) ? esc_attr( $attributes['btn']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['btn']['width']['tablet'] ) ? esc_attr( $attributes['btn']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['btn']['width']['mobile'] ) ? esc_attr( $attributes['btn']['width']['mobile'] ) : '',
	),
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['btn']['font']['size']['desktop'] ) ? esc_attr( $attributes['btn']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['btn']['font']['size']['tablet'] ) ? esc_attr( $attributes['btn']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['btn']['font']['size']['mobile'] ) ? esc_attr( $attributes['btn']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['btn']['font']['weight'] ) ? esc_attr( $attributes['btn']['font']['weight'] ) : '',
		'family' => isset( $attributes['btn']['font']['family'] ) ? esc_attr( $attributes['btn']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['btn']['letterCase'] ) ? esc_attr( $attributes['btn']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['btn']['decoration'] ) ? esc_attr( $attributes['btn']['decoration'] ) : '',
	'line_height'    => isset( $attributes['btn']['lineHeight'] ) ? esc_attr( $attributes['btn']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['btn']['letterSpacing'] ) ? esc_attr( $attributes['btn']['letterSpacing'] ) : '',
	'color'          => array(
		'text'     => isset( $attributes['btn']['color']['text'] ) ? esc_attr( $attributes['btn']['color']['text'] ) : '',
		'text_h'   => isset( $attributes['btn']['color']['textHover'] ) ? esc_attr( $attributes['btn']['color']['textHover'] ) : '',
		'bg'       => isset( $attributes['btn']['color']['bg'] ) ? esc_attr( $attributes['btn']['color']['bg'] ) : '',
		'bg_h'     => isset( $attributes['btn']['color']['bgHover'] ) ? esc_attr( $attributes['btn']['color']['bgHover'] ) : '',
		'border_h' => isset( $attributes['btn']['color']['borderHover'] ) ? esc_attr( $attributes['btn']['color']['borderHover'] ) : '',
	),
);

$typography = array(
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['typography']['font']['size']['desktop'] ) ? esc_attr( $attributes['typography']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['typography']['font']['size']['tablet'] ) ? esc_attr( $attributes['typography']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['typography']['font']['size']['mobile'] ) ? esc_attr( $attributes['typography']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['typography']['font']['weight'] ) ? esc_attr( $attributes['typography']['font']['weight'] ) : '',
		'family' => isset( $attributes['typography']['font']['family'] ) ? esc_attr( $attributes['typography']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['typography']['letterCase'] ) ? esc_attr( $attributes['typography']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['typography']['decoration'] ) ? esc_attr( $attributes['typography']['decoration'] ) : '',
	'line_height'    => isset( $attributes['typography']['lineHeight'] ) ? esc_attr( $attributes['typography']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['typography']['letterSpacing'] ) ? esc_attr( $attributes['typography']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['typography']['color']['text'] ) ? esc_attr( $attributes['typography']['color']['text'] ) : '',
	),
);

$block_styles = "
#$block_id {
	{$styles['padding']['desktop']}
	{$styles['margin']}
	{$styles['border']}
	border-radius: {$styles['radius']};

	font-size: {$typography['font']['size']['desktop']};
	font-weight: {$typography['font']['weight']};
	font-family: {$typography['font']['family']};
	text-transform: {$typography['lettercase']};
	text-decoration: {$typography['decoration']};
	line-height: {$typography['line_height']};
	letter-spacing: {$typography['letter_spacing']};
	color: {$typography['color']['text']};

	background-color: {$styles['color']['bg']};
}

#$block_id .vidplex-channel-details__logo {
	{$logo_styles['margin']}
	max-width: {$logo_styles['width']['desktop']};
	max-height: {$logo_styles['height']['desktop']};
	border-radius: {$logo_styles['radius']};

	& img {
		width: {$logo_styles['width']['desktop']};
		height: {$logo_styles['height']['desktop']};
		object-fit: {$logo_styles['fit']};
		border-radius: {$logo_styles['radius']};
	}
}

#$block_id .vidplex-channel-details__title {
	{$title_styles['margin']}
	font-size: {$title_styles['font']['size']['desktop']};
	font-weight: {$title_styles['font']['weight']};
	font-family: {$title_styles['font']['family']};
	text-transform: {$title_styles['lettercase']};
	text-decoration: {$title_styles['decoration']};
	line-height: {$title_styles['line_height']};
	letter-spacing: {$title_styles['letter_spacing']};
	color: {$title_styles['color']['text']};
}

#$block_id .vidplex-channel-details__handle {
	{$handle_styles['margin']}
	font-size: {$handle_styles['font']['size']['desktop']};
	font-weight: {$handle_styles['font']['weight']};
	font-family: {$handle_styles['font']['family']};
	text-transform: {$handle_styles['lettercase']};
	text-decoration: {$handle_styles['decoration']};
	line-height: {$handle_styles['line_height']};
	letter-spacing: {$handle_styles['letter_spacing']};
	color: {$handle_styles['color']['text']};
}

#$block_id .vidplex-channel-details__meta {
	{$meta_styles['margin']}
	font-size: {$meta_styles['font']['size']['desktop']};
	font-weight: {$meta_styles['font']['weight']};
	font-family: {$meta_styles['font']['family']};
	text-transform: {$meta_styles['lettercase']};
	text-decoration: {$meta_styles['decoration']};
	line-height: {$meta_styles['line_height']};
	letter-spacing: {$meta_styles['letter_spacing']};
	color: {$meta_styles['color']['text']};
	gap: {$meta_styles['gap']};
	row-gap: {$meta_styles['row_gap']};
}

#$block_id .vidplex-channel-details__subscribe-btn {
	{$btn_styles['margin']}
	text-align: {$btn_styles['align']};

	& button {
		{$btn_styles['padding']['desktop']}
		{$btn_styles['border']}
		border-radius: {$btn_styles['radius']};
		width: {$btn_styles['width']['desktop']};
		background-color: {$btn_styles['color']['bg']};
		color: {$btn_styles['color']['text']};
		font-size: {$btn_styles['font']['size']['desktop']};
		font-weight: {$btn_styles['font']['weight']};
		font-family: {$btn_styles['font']['family']};
		text-transform: {$btn_styles['lettercase']};
		text-decoration: {$btn_styles['decoration']};
		line-height: {$btn_styles['line_height']};
		letter-spacing: {$btn_styles['letter_spacing']};
	}
	& button:hover {
		background-color: {$btn_styles['color']['bg_h']};
		color: {$btn_styles['color']['text_h']};
		border-color: {$btn_styles['color']['border_h']};
	}
}

@media only screen and (max-width: 1025px) {
	#$block_id {
		{$styles['padding']['tablet']}
		font-size: {$typography['font']['size']['tablet']};
	}

	#$block_id .vidplex-channel-details__logo {
		max-width: {$logo_styles['width']['tablet']};
		max-height: {$logo_styles['height']['tablet']};

		& img {
			width: {$logo_styles['width']['tablet']};
			height: {$logo_styles['height']['tablet']};
		}
	}

	#$block_id .vidplex-channel-details__title {
		font-size: {$title_styles['font']['size']['tablet']};
	}

	#$block_id .vidplex-channel-details__handle {
		font-size: {$handle_styles['font']['size']['tablet']};
	}

	#$block_id .vidplex-channel-details__meta {
		font-size: {$meta_styles['font']['size']['tablet']};
	}

	#$block_id .vidplex-channel-details__subscribe-btn {
		& button {
			{$btn_styles['padding']['tablet']}
			font-size: {$btn_styles['font']['size']['tablet']};
			width: {$btn_styles['width']['tablet']};
		}
	}
}
@media only screen and (max-width: 570px) {
	#$block_id {
		{$styles['padding']['mobile']}
		font-size: {$typography['font']['size']['mobile']};
	}

	#$block_id .vidplex-channel-details__logo {
		max-width: {$logo_styles['width']['mobile']};
		max-height: {$logo_styles['height']['mobile']};

		& img {
			width: {$logo_styles['width']['mobile']};
			height: {$logo_styles['height']['mobile']};
		}
	}

	#$block_id .vidplex-channel-details__title {
		font-size: {$title_styles['font']['size']['mobile']};
	}

	#$block_id .vidplex-channel-details__handle {
		font-size: {$handle_styles['font']['size']['mobile']};
	}

	#$block_id .vidplex-channel-details__meta {
		font-size: {$meta_styles['font']['size']['mobile']};
	}

	#$block_id .vidplex-channel-details__subscribe-btn {
		& button {
			font-size: {$btn_styles['font']['size']['mobile']};
			{$btn_styles['padding']['mobile']}
			width: {$btn_styles['width']['mobile']};
		}
	}
}
";


$font_families = array();

if ( isset( $attributes['title']['font']['family'] ) && ! empty( $attributes['title']['font']['family'] ) ) {
	$font_families[] = $attributes['title']['font']['family'];
}
if ( isset( $attributes['handle']['font']['family'] ) && ! empty( $attributes['handle']['font']['family'] ) ) {
	$font_families[] = $attributes['handle']['font']['family'];
}
if ( isset( $attributes['meta']['font']['family'] ) && ! empty( $attributes['meta']['font']['family'] ) ) {
	$font_families[] = $attributes['meta']['font']['family'];
}
if ( isset( $attributes['btn']['font']['family'] ) && ! empty( $attributes['btn']['font']['family'] ) ) {
	$font_families[] = $attributes['btn']['font']['family'];
}
if ( isset( $attributes['typography']['font']['family'] ) && ! empty( $attributes['typography']['font']['family'] ) ) {
	$font_families[] = $attributes['typography']['font']['family'];
}

// Remove duplicate font families.
$font_families = array_unique( $font_families );
$font_query    = '';
// Add other fonts.
foreach ( $font_families as $key => $family ) {
	if ( 0 === $key ) {
		$font_query .= 'family=' . str_replace( ' ', '+', $family ) . ':wght@100;200;300;400;500;600;700;800;900';
	} else {
		$font_query .= '&family=' . str_replace( ' ', '+', $family ) . ':wght@100;200;300;400;500;600;700;800;900';
	}
}
if ( ! empty( $font_query ) ) {
	// Generate the inline style for the Google Fonts link.
	$google_fonts_url = 'https://fonts.googleapis.com/css2?' . $font_query . '&display=swap';

	echo '<link rel="stylesheet" href="' . $google_fonts_url . '"/>';
}

add_action(
	'wp_enqueue_scripts',
	function () use ( $block_styles ) {
		wp_add_inline_style( 'vidplex-block-styles', vidplex_clean_empty_css( $block_styles ) );
	}
);

$wrapper_attributes = get_block_wrapper_attributes();
?>

<div class="vidplex-block-wrapper">
	<div <?php echo $wrapper_attributes; ?>>
		<div class="vidplex-channel-details" id="<?php echo $block_id; ?>">
			<?php echo $content; ?>
		</div>
	</div>
</div>