<?php

use Wolfcast\BrowserDetection;

function momota_safari_polyfills() {

	if ( apply_filters( 'kubio_is_enabled', false ) ) {
		return;
	}

	$browser    = new BrowserDetection();
	$version    = $browser->getVersion();
	$os_version = $browser->getPlatformVersion( true );

	$is_safari_without_gap_support = false;

	// because every browser on iOS is actually Safari we just check for the iOS version
	if ( $browser->getPlatform() === BrowserDetection::PLATFORM_IOS && version_compare( $os_version, '14.5', '<' ) ) {
		$is_safari_without_gap_support = true;
	}

	if ( $browser->getPlatform() === BrowserDetection::PLATFORM_MACINTOSH && $browser->getName() === BrowserDetection::BROWSER_SAFARI && $browser->compareVersions( $version, '14' ) <= 1 ) {
		$is_safari_without_gap_support = true;
	}

	if ( $is_safari_without_gap_support ) {
		add_action(
			'wp_head',
			function () {
				?>
				<script>
					(function () {
						var flex = document.createElement('div');
						flex.style.display = 'flex';
						flex.style.flexDirection = 'column';
						flex.style.rowGap = '1px';

						// create two, elements inside it
						flex.appendChild(document.createElement('div'));
						flex.appendChild(document.createElement('div'));

						// append to the DOM (needed to obtain scrollHeight)
						document.documentElement.appendChild(flex);
						var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
						flex.parentNode.removeChild(flex);

						if (!isSupported) {
							console.warn('Kubio - Browser does not support flex gap ');
							document.documentElement.classList.add('kubio-enable-gap-fallback');
						}
					})();
				</script>
				<?php
			},
			5
		);
	}

	if ( $browser->getPlatform() === BrowserDetection::PLATFORM_IOS || $browser->getPlatform() === BrowserDetection::PLATFORM_MACINTOSH ) {
		add_action(
			'wp_head',
			function () {
				?>
				<script>
					(function () {
						var docEL = document.documentElement;
						var style = docEL.style;
						if (!("backgroundAttachment" in style)) return false;
						var oldValue = style.backgroundAttachment;
						style.backgroundAttachment = "fixed";
						var isSupported = (style.backgroundAttachment === "fixed");
						style.backgroundAttachment = oldValue;

						if (navigator.userAgent.toLowerCase().indexOf('mac') !== -1 && navigator.maxTouchPoints) {
							isSupported = false;
						}

						if (!isSupported) {
							console.warn('Kubio - Browser does not support attachment fix');
							document.documentElement.classList.add('kubio-attachment-fixed-support-fallback');
						}
					})()
				</script>

				<?php
			},
			5
		);
	}
}

add_action( 'init', 'momota_safari_polyfills' );