import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

import chevronDown from "./img/chevron_down.svg";

import { InnerBlocks } from "@wordpress/block-editor";
import getAdminLanguageFromCookies from "../../../utils/getAdminLanguageFromCookies.js";

export default function save({ attributes }) {
	const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
	const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
		return (
			<div
				data-focus-bullet-title={focusBullet.title}
				className="homegrade-blocks-focus-point-bullet	"
				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>
		);
	});
	const currentLang = getAdminLanguageFromCookies("wp-wpml_current_language");
	const localVersionTextDescription =
		currentLang === "nl"
			? "Tekstversie van de instructies in de afbeelding"
			: "Version texte des indications de l'illustration";
	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-focused-thematique`,
			})}
		>
			{coverUrl && (
				<figure className={`picture-container`}>
					<img
						src={coverUrl}
						alt={coverAlt}
						className={`wp-image-${coverId}`}
					/>
					{renderedFocusPointBullets}
				</figure>
			)}
			<button
				className="homegrade-blocks-focused-thematique__figcaption-toggle"
				aria-expanded="false"
			>
				{localVersionTextDescription}
				{/* <ChevronDown /> */}
				<img src={chevronDown} alt="" />
			</button>
			<figcaption aria-hidden="true">
				<ol>
					<InnerBlocks.Content />
				</ol>
			</figcaption>
		</section>
	);
}