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

import { PanelBody } from "@wordpress/components";

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

	function onChangeChapterLinkTitle(chapterLinkTitle) {
		setAttributes({ chapterLinkTitle });
	}
	function onChangeChapterLinkDescription(chapterLinkDescription) {
		setAttributes({ chapterLinkDescription });
	}

	function onRelatedPostChange(chapterLinkRelatedPost) {
		setAttributes({ chapterLinkRelatedPost });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="related-conseil-panel-body"
					title={__(
						"Page de lien de ce Chapitre ",
						"homegrade-blocks__texte-fonctionnel"
					)}
				>
					<LinkControl
						value={chapterLinkRelatedPost}
						onChange={onRelatedPostChange}
					/>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-lien-chapitre`,
				})}
			>
				<RichText
					tagName="h4"
					className="homegrade-blocks-lien-chapitre__title"
					placeholder={__(
						"Titre du chapitre",
						"homegrade-blocks__texte-fonctionnel"
					)}
					value={chapterLinkTitle}
					onChange={onChangeChapterLinkTitle}
				/>
				<RichText
					tagName="p"
					className="homegrade-blocks-lien-chapitre__description"
					placeholder={__(
						"Descriptif du chapitre",
						"homegrade-blocks__texte-fonctionnel"
					)}
					value={chapterLinkDescription}
					onChange={onChangeChapterLinkDescription}
				/>
				{chapterLinkRelatedPost && chapterLinkRelatedPost.url && (
					<a className="homegrade-blocks-lien-chapitre__cta">
						{__("En savoir plus", "homegrade-blocks__texte-fonctionnel")}
						<div class="cta_arrow_button">
							<img src={arrow} alt="" />
						</div>
					</a>
				)}
			</div>
		</>
	);
}