import {
	useBlockProps,
	MediaPlaceholder,
	RichText,
	BlockControls,
	MediaReplaceFlow,
} from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const {
		coverUrl,
		coverId,
		coverAlt,
		showDescription,
		coverDescription,
		showLegend,
		coverLegend,
		focusBullets,
	} = attributes;
	const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
		return (
			<div
				data-focus-bullet-title={focusBullet.title}
				className="homegrade-blocks-focus-point-bullet"
				aria-hidden="true"
				style={{
					top: `${focusBullet.y * 100}%`,
					left: `${focusBullet.x * 100}%`,
				}}
				data-postion-x={focusBullet.x * 100}
				data-postion-y={focusBullet.y * 100}
			>
				<span className="homegrade-blocks-focus-point-bullet__index">
					{index + 1}
				</span>
			</div>
		);
	});
	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-focused-schema`,
			})}
		>
			{coverUrl && (
				<figure className={`picture-container`}>
					<img
						src={coverUrl}
						alt={coverAlt}
						className={`wp-image-${coverId}`}
						data-description={coverDescription}
						data-legend={coverLegend}
					/>
					{renderedFocusPointBullets}
				</figure>
			)}
			<figcaption>
				<p className="description-legend">
					{showLegend && coverLegend && (
						<span className="legend">{coverLegend}</span>
					)}
					{showDescription && coverDescription && (
						<span className="description">{coverDescription}</span>
					)}
				</p>

				<ol>
					<InnerBlocks.Content />
				</ol>
			</figcaption>
		</section>
	);
}
