<?php
/**
 * Preloader template
 *
 * @package Multi
 */

?>

<?php
$preloader_animation = get_theme_mod( 'multi_preloader_animation', MULTIMAGAZINE_PRELOADER_ANIMATION );
$preloader_classes   = array( 'preloader', 'show', $preloader_animation );
?>
<div class="<?php echo esc_attr( implode( ' ', $preloader_classes ) ); ?>">
	<?php
	$animation_type = get_theme_mod( 'multi_preloader_spinner_type', MULTIMAGAZINE_PRELOADER_SPINNER_TYPE );

	switch ( $animation_type ) {
		case 'spinner':
			$spinner = absint( get_theme_mod( 'multi_preloader_spinner', MULTIMAGAZINE_PRELOADER_SPINNER ) );
			if ( 0 !== $spinner ) :
				?>
				<div class="preloader-spinner">
				<?php
				switch ( $spinner ) :
					case 1:
						?>
						<div class="md-spinner"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="75" width="75" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5"></svg></div>
						<?php
						break;
					case 3:
						?>
						<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
						<?php
						break;
					case 5:
						?>
						<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
						<?php
				endswitch;
				?>
				</div>
				<?php
			endif;
			break;
		case 'media':
			$loader_media        = get_theme_mod( 'multi_preloader_media', MULTIMAGAZINE_PRELOADER_MEDIA );
			$loader_media_width  = get_theme_mod( 'multi_preloader_media_width', MULTIMAGAZINE_PRELOADER_MEDIA_WIDTH );
			$loader_media_height = get_theme_mod( 'multi_preloader_media_height', MULTIMAGAZINE_PRELOADER_MEDIA_HEIGHT );

			$file_type = wp_check_filetype( $loader_media );
			if ( 'video/mp4' === $file_type['type'] ) {
				?>
				<video class="preloader-video" autoplay loop muted playsinline width="<?php echo esc_attr( $loader_media_width ); ?>" height="<?php echo esc_attr( $loader_media_height ); ?>" >
					<source src="<?php echo esc_url( $loader_media ); ?>" type="<?php echo esc_attr( $file_type['type'] ); ?>">
				</video>
				<?php
			} else {
				?>
				<img src="<?php echo esc_url( $loader_media ); ?>" class="preloader-image" alt="<?php echo esc_attr( __( 'Loading...', 'multimagazine' ) ); ?>" width="<?php echo esc_attr( $loader_media_width ); ?>" height="<?php echo esc_attr( $loader_media_height ); ?>">
				<?php
			}
			break;
		case 'lottie':
			$lottie_file_id = get_theme_mod( 'multi_preloader_lottie_file', MULTIMAGAZINE_PRELOADER_LOTTIE_FILE );
			$lottie_url     = wp_get_attachment_url( $lottie_file_id );

			if ( empty( $lottie_url ) ) {
				$lottie_url = get_theme_mod( 'multi_preloader_lottie_url', MULTIMAGAZINE_PRELOADER_LOTTIE_URL );
			}
			if ( empty( $lottie_url ) ) {
				break;
			}
			$speed  = get_theme_mod( 'multi_preloader_lottie_speed', MULTIMAGAZINE_PRELOADER_LOTTIE_SPEED );
			$width  = get_theme_mod( 'multi_preloader_lottie_width', MULTIMAGAZINE_PRELOADER_LOTTIE_WIDTH );
			$height = get_theme_mod( 'multi_preloader_lottie_height', MULTIMAGAZINE_PRELOADER_LOTTIE_HEIGHT );
			?>
			<lottie-player src="<?php echo esc_url( $lottie_url ); ?>" class="preloader-lottie" background="transparent"  speed="<?php echo esc_attr( $speed ); ?>"  style="width: <?php echo esc_attr( $width ); ?>; height: <?php echo esc_attr( $height ); ?>;" loop autoplay></lottie-player>
			<?php
			break;
	}
	?>
</div>
