import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
// eslint-disable-next-line import/no-unresolved
// import { getCSSValueFromRawStyle } from '@wordpress/style-engine';

const parseTimeInMilliseconds = ( time ) => {
	if ( time?.match( /[a-zA-Z]/g )?.join( '' ) === 's' ) {
		return parseFloat( time ) * 1000;
	}
	return parseFloat( time );
};

export default function Save( {
	attributes: {
		sliderSettings,
		timeBetweenSlides,
		spaceBetween,
		slidesPerView,
		sliderId,
		showNavigation,
		showPagination,
		showScrollbar,
		sliderHeight,
		useOnlyAdvancedSliderSettings,
		arrowsFromEdge,
	},
} ) {
	let parsedSettings;
	try {
		parsedSettings =
			sliderSettings !== '' ? JSON.parse( sliderSettings ) : {};
	} catch {
		// eslint-disable-next-line no-console
		console.warn( 'Error parsing slider settings' );
		parsedSettings = { pagination: false, navigation: false };
	}

	const timeBetweenSlidesNumber =
		parseTimeInMilliseconds( timeBetweenSlides );

	/**
	 * add overriden attributes
	 */
	if ( timeBetweenSlidesNumber >= 0 ) {
		parsedSettings.autoplay = {
			...parsedSettings.autoplay,
			delay: timeBetweenSlidesNumber,
		};
	}

	// TODO: add space between slides as blockGap
	// const blockGap = style?.spacing?.blockGap;
	// if ( blockGap ) {
	// 	parsedSettings.spaceBetween = getCSSValueFromRawStyle( blockGap );
	// console.log( getCSSValueFromRawStyle( blockGap ) );
	// }

	// each slider should have its unique class - therefore addition of sliderId
	if ( ! useOnlyAdvancedSliderSettings ) {
		if ( showNavigation ) {
			parsedSettings.navigation = {
				...parsedSettings.navigation,
				prevEl: `.swiper-button-prev-${ sliderId }`,
				nextEl: `.swiper-button-next-${ sliderId }`,
			};
		} else {
			delete parsedSettings.navigation;
		}

		if ( showPagination ) {
			parsedSettings.pagination = {
				...parsedSettings.pagination,
				el: `.swiper-pagination-${ sliderId }`,
				type: parsedSettings?.pagination?.type ?? 'bullets',
				// clickable: true,
			};
		} else {
			delete parsedSettings.pagination;
		}

		if ( showScrollbar ) {
			parsedSettings.scrollbar = {
				...parsedSettings.scrollbar,
				el: `.swiper-scrollbar-${ sliderId }`,
				draggable: true,
			};
		} else {
			delete parsedSettings.scrollbar;
		}

		if ( spaceBetween ) {
			parsedSettings.spaceBetween = spaceBetween;
		}

		if ( slidesPerView ) {
			parsedSettings.slidesPerView = slidesPerView;
		}
	}
	//  using converted parsedSettings back to JSON helps in managing, but also is a weak security layer - possible javascript is removed

	const hasPagination = Boolean( parsedSettings.pagination );
	const hasNavigation = Boolean( parsedSettings.navigation );
	const hasScrollBar = Boolean( parsedSettings.scrollbar );

	return (
		<div
			{ ...useBlockProps.save( {
				className:
					'swiper' +
					( sliderHeight ? ' mie-slider-has-fixed-height' : '' ),
				'data-settings': JSON.stringify( parsedSettings ),
				style: { height: sliderHeight },
			} ) }
		>
			<div className="swiper-wrapper" { ...useInnerBlocksProps.save() } />
			{ hasPagination && (
				<div
					className={ `swiper-pagination swiper-pagination-${ sliderId }` }
				/>
			) }
			{ hasNavigation && (
				<>
					<div
						className={ `swiper-button-prev swiper-button-prev-${ sliderId }` }
						style={ { left: arrowsFromEdge } }
					/>
					<div
						className={ `swiper-button-next swiper-button-next-${ sliderId }` }
						style={ { right: arrowsFromEdge } }
					/>
				</>
			) }
			{ hasScrollBar && (
				<div
					className={ `swiper-scrollbar swiper-scrollbar-${ sliderId }` }
				/>
			) }
		</div>
	);
}