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

export default function Edit({ attributes, setAttributes }) {
	const { relatedPostId } = attributes;
	const post = useSelect((select) =>
		select("core").getEntityRecord("postType", "parcours", relatedPostId)
	);
	const stepIconUrl = useSelect(
		(select) => {
			let setpIconID = post?.acf?.step_icon;
			const media = select("core").getMedia(setpIconID);
			return media?.source_url ?? null;
		},
		[post]
	);

	return (
		<>
			<OptionsSelectControl
				relatedPostId={relatedPostId}
				setAttributes={setAttributes}
			/>

			<div
				{...useBlockProps({
					className: `homegrade-blocks-parcours-step parcours-step parcours-step-card`,
				})}
			>
				{post && (
					<>
						<img class="parcours-step-card__icon" src={stepIconUrl} alt="" />
						<h3 className="parcours-step-card__title">{post.title.rendered}</h3>
					</>
				)}
			</div>
		</>
	);
}