import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import { useSelect } from "@wordpress/data";

export default function Edit({ attributes, setAttributes, ...props }) {
	const years = useSelect(
		(select) => {
			const { getBlocks } = select("core/block-editor");
			const childBlocks = getBlocks(props.clientId) || [];
			return childBlocks
				.filter((b) => b.name === "carhop-blocks/highlight-timeline-step")
				.map((b) => b.attributes?.year)
				.filter((y) => y !== undefined && y !== null && y !== "");
		},
		[props.clientId]
	);

	return (
		<div
			{...useBlockProps({
				className: "highlight-timeline",
			})}
		>
			<div className="highlight-timeline__innerblocks">
				<InnerBlocks
					allowedBlocks={["carhop-blocks/highlight-timeline-step"]}
				/>
			</div>

			<ul className="highlight-timeline__years">
				{years.map((y, idx) => (
					<li key={idx} className="story-timeline__year">
						{y}
					</li>
				))}
			</ul>
		</div>
	);
}