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";
import getAdminLanguageFromCookies from "../../../../utils/getAdminLanguageFromCookies.js";

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 });
	}

	const currentLang = getAdminLanguageFromCookies("wp-wpml_current_language");
	const localVersionTextDescription =
		currentLang === "nl" ? "Meer weten" : "En savoir plus";

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="related-conseil-panel-body"
					title={__("Page de lien de ce Chapitre ", "homegrade-blocks")}
				>
					<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")}
					value={chapterLinkTitle}
					onChange={onChangeChapterLinkTitle}
				/>
				<RichText
					tagName="p"
					className="homegrade-blocks-lien-chapitre__description"
					placeholder={__("Descriptif du chapitre", "homegrade-blocks")}
					value={chapterLinkDescription}
					onChange={onChangeChapterLinkDescription}
				/>
				{chapterLinkRelatedPost && chapterLinkRelatedPost.url && (
					<a className="homegrade-blocks-lien-chapitre__cta">
						{localVersionTextDescription}
						<div class="cta_arrow_button">
							<img src={arrow} alt="" />
						</div>
					</a>
				)}
			</div>
		</>
	);
}
