import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import arrow from "../img/arrow-right-circle.svg";
import "./editor.scss";
import OptionsSelectControl from "./OptionsSelectControl";

export default function Edit({ attributes, setAttributes, ...props }) {
	let {
		chapterLinkTitle,
		chapterLinkDescription,
		chapterLinkRelatedPostId,
		chapterLinkRelatedPostUrl,
	} = attributes;

	let currentRelatedPostConseil = useSelect((select) =>
		select("core").getEntityRecord(
			"postType",
			"conseils",
			chapterLinkRelatedPostId
		)
	);

	if (
		currentRelatedPostConseil &&
		currentRelatedPostConseil.link !== chapterLinkRelatedPostUrl
	) {
		console.log(chapterLinkRelatedPostUrl);
		console.log(currentRelatedPostConseil.link);
		setAttributes({
			chapterLinkRelatedPostUrl: currentRelatedPostConseil.link,
		});
	}

	function onChangeChapterLinkTitle(chapterLinkTitle) {
		setAttributes({ chapterLinkTitle });
	}
	function onChangeChapterLinkDescription(chapterLinkDescription) {
		setAttributes({ chapterLinkDescription });
	}
	return (
		<>
			<OptionsSelectControl
				chapterLinkRelatedPostId={chapterLinkRelatedPostId}
				setAttributes={setAttributes}
			/>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-lien-chapitre`,
				})}
			>
				<RichText
					tagName="h4"
					className="homegrade-blocks-lien-chapitre__title"
					placeholder={__("Titre du chapitre", "homegrade-blocks")}
					value={chapterLinkTitle}
					onChange={onChangeChapterLinkTitle}
				/>
				<RichText
					tagName="p"
					className="homegrade-blocks-lien-chapitre__description"
					placeholder={__("Descriptif du chapitre", "homegrade-blocks")}
					value={chapterLinkDescription}
					onChange={onChangeChapterLinkDescription}
				/>
				{chapterLinkRelatedPostUrl && (
					<a className="homegrade-blocks-lien-chapitre__cta" href={chapterLinkRelatedPostUrl}>
						{__("En savoir plus", "homegrade-blocks")}
						<div class="cta_arrow_button">
							<img src={arrow} alt="" />
						</div>
					</a>
				)}
			</div>
		</>
	);
}