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

/**
 * Ancien save (blockWidth) — conservé pour la migration des blocs.
 */
export default function deprecatedSave({ attributes }) {
	const {
		backgroundColor,
		textColor,
		hasLightBackground,
		blockVariant,
		blockWidth,
		shapeType,
		borderColor,
	} = attributes;

	const blockWidthClass =
		blockWidth === "contained"
			? "aligncontained"
			: blockWidth === "wide"
				? "alignwide"
				: "alignfull";

	const lightnessClass = hasLightBackground
		? "content-box--bg-light"
		: "content-box--bg-dark";

	return (
		<section
			{...useBlockProps.save({
				className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${blockWidthClass}`,
				style: {
					"--content-box-text-color": textColor ?? "inherit",
					"--content-box-background-color":
						blockVariant === "backgrounded" ||
						blockVariant === "framed-backgrounded"
							? backgroundColor
							: "transparent",
				},
			})}
		>
			{blockVariant === "backgrounded" &&
				backgroundColor &&
				shapeType === "shapeA" && (
					<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
				)}
			{blockVariant === "backgrounded" &&
				backgroundColor &&
				shapeType === "shapeB" && (
					<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
				)}
			{blockVariant === "backgrounded" &&
				backgroundColor &&
				shapeType === "shapeC" && (
					<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
				)}
			{blockVariant === "framed" &&
				backgroundColor &&
				shapeType === "shapeA" && (
					<ShapeA backgroundColor={"none"} borderColor={borderColor} />
				)}
			{blockVariant === "framed" &&
				backgroundColor &&
				shapeType === "shapeB" && (
					<ShapeB backgroundColor={"none"} borderColor={borderColor} />
				)}
			{blockVariant === "framed" &&
				backgroundColor &&
				shapeType === "shapeC" && (
					<ShapeC backgroundColor={"none"} borderColor={borderColor} />
				)}
			{blockVariant === "framed-backgrounded" &&
				backgroundColor &&
				shapeType === "shapeA" && (
					<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
				)}
			{blockVariant === "framed-backgrounded" &&
				backgroundColor &&
				shapeType === "shapeB" && (
					<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
				)}
			{blockVariant === "framed-backgrounded" &&
				backgroundColor &&
				shapeType === "shapeC" && (
					<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
				)}
			<div className="content-box__innerblocks">
				<InnerBlocks.Content />
			</div>
		</section>
	);
}