import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";

/**
 * Ancien save statique (SVG + section) — conservé pour la validation en éditeur
 * des contenus déjà publiés avant le passage au rendu dynamique.
 */
function DeprecatedSave({ attributes }) {
	const {
		hasLightBackground,
		disposition,
		coverUrl,
		coverAlt,
		coverSize,
		coverType,
		backgroundColor,
		textColor,
		shapeType,
		blockVariant,
		borderColor,
	} = attributes;

	return (
		<section
			{...useBlockProps.save({
				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}  chapter-section--${blockVariant}
					${
						hasLightBackground
							? "chapter-section--bg-light"
							: "chapter-section--bg-dark"
					}`,
				style: {
					"--chapter-section-text-color": textColor
						? textColor
						: "var(--advised-text-color)",
					"--cta-current-color":
						blockVariant === "backgrounded"
							? "inherit"
							: "var(--wp--preset--color--primary) !important",
				},
			})}
		>
			<div className="chapter-section__inner">
				{blockVariant === "backgrounded" &&
					backgroundColor &&
					shapeType === "variationA" && (
						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
					)}
				{blockVariant === "backgrounded" &&
					backgroundColor &&
					shapeType === "variationB" && (
						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
					)}
				{blockVariant === "framed" &&
					backgroundColor &&
					shapeType === "variationA" && (
						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
					)}
				{blockVariant === "framed" &&
					backgroundColor &&
					shapeType === "variationB" && (
						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
					)}
				<div className="chapter-section__content">
					<div className="chapter-section__innerblocks">
						<InnerBlocks.Content />
					</div>
				</div>
				{coverUrl && (
					<img
						className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
						src={coverUrl}
						alt={coverAlt}
					/>
				)}
			</div>
		</section>
	);
}

const deprecated = [
	{
		save: DeprecatedSave,
	},
];

export default deprecated;
