import UAParser from 'ua-parser-js';
const flexGap = () => {
	init();
};

const init = () => {
	addBrowsersClass();
	if (!checkFlexGap()) {
		document.body.classList.add('noflexgap');
		doFlexGapPolyfill();
	}
};

const doFlexGapPolyfill = () => {
	var flexContainers = document.querySelectorAll(
		'div,a,button,span,li,ul,strong,em,section,article,header,footer,aside,nav,main,form,fieldset,legend,label,figure,figcaption,pre,code,blockquote,h1,h2,h3,h4,h5,h6,p'
	);

	for (var i = 0; i < flexContainers.length; i++) {
		if (
			(window.getComputedStyle(flexContainers[i]).display == 'flex' &&
				parseInt(
					window
						.getComputedStyle(flexContainers[i])
						.getPropertyValue('row-gap')
				) > 0) ||
			(window.getComputedStyle(flexContainers[i]).display ==
				'inline-flex' &&
				parseInt(
					window
						.getComputedStyle(flexContainers[i])
						.getPropertyValue('row-gap')
				) > 0)
		) {
			var flexContainer = flexContainers[i];

			var rowGap =
				parseInt(
					getComputedStyle(flexContainer).getPropertyValue('row-gap')
				) / 2;
			var columnGap =
				parseInt(
					getComputedStyle(flexContainer).getPropertyValue(
						'column-gap'
					)
				) / 2;

			if (
				window.getComputedStyle(flexContainers[i]).flexDirection ==
					'row' ||
				window.getComputedStyle(flexContainers[i]).flexDirection ==
					'row-reverse'
			) {
				flexContainer.style.marginLeft = -columnGap + 'px!important';
				flexContainer.style.marginRight = -columnGap + 'px!important';
			} else {
				flexContainer.style.marginTop = -rowGap + 'px!important';
				flexContainer.style.marginBottom = -rowGap + 'px!important';
			}

			var children = flexContainer.children;
			for (var j = 0; j < children.length; j++) {
				var child = children[j];
				// if (j > 0) {
				//   child.style.marginTop = rowGap + 'px';
				// }
				// if (j < children.length - 1) {
				//   child.style.marginBottom = rowGap + 'px';
				// }
				if (
					window.getComputedStyle(flexContainer).flexDirection ==
						'row' ||
					window.getComputedStyle(flexContainer).flexDirection ==
						'row-reverse'
				) {
					child.style.marginLeft = columnGap + 'px';
					child.style.marginRight = columnGap + 'px';
				} else {
					child.style.marginTop = rowGap + 'px';
					child.style.marginBottom = rowGap + 'px';
				}
			}
		}
	}
};
const addBrowsersClass = () => {
	var parser = new UAParser();
	// console.log(parser.getResult());
	if (
		(parser.getBrowser().name.toUpperCase() == 'CHROME' &&
			parseInt(parser.getBrowser().version) < 84) ||
		(parser.getBrowser().name.toUpperCase() == 'SAFARI' &&
			parseInt(parser.getBrowser().version) < 14) ||
		(parser.getBrowser().name.toUpperCase() == 'FIREFOX' &&
			parseInt(parser.getBrowser().version) < 80) ||
		(parser.getBrowser().name.toUpperCase() == 'EDGE' &&
			parseInt(parser.getBrowser().version) < 63) ||
		(parser.getBrowser().name.toUpperCase() == 'OPERA' &&
			parseInt(parser.getBrowser().version) < 70)
	) {
		document.body.classList.add('oldBrowser');
	}
};

const checkFlexGap = () => {
	// create flex container with row-gap set
	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.body.appendChild(flex);
	var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
	flex.parentNode.removeChild(flex);

	return isSupported;
};

export { flexGap };
