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

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/story-timeline-step")
				.map((b) => b.attributes?.year)
				.filter((y) => y !== undefined && y !== null && y !== "");
		},
		[props.clientId]
	);
	return (
		<>
			<section
				{...useBlockProps({
					className: `story-timeline`,
				})}
			>
				<aside className="story-timeline__years">
					<ul>
						{years.map((y, idx) => (
							<li key={idx} className="story-timeline__year">
								{y}
							</li>
						))}
					</ul>
				</aside>
				<div className="story-timeline__innerblocks">
					<InnerBlocks allowedBlocks={["carhop-blocks/story-timeline-step"]} />
				</div>
			</section>
		</>
	);
}