import { __ } from "@wordpress/i18n";
import "./editor.scss";

import {
	useBlockProps,
	RichText,
	InspectorControls,
	BlockControls,
	__experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";

import { PanelBody, TextControl, ToggleControl } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
	const { ctaTextLabel, ctaLink } = attributes;

	function onChangeCtaTextLabel(ctaTextLabel) {
		setAttributes({ ctaTextLabel });
	}
	function onChangeCtaLink(ctaLink) {
		console.log(ctaLink);
		setAttributes({ ctaLink });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="homegrade-blocks-content-page-header__panel-cta"
					title={__("Call to action", "homegrade-blocks")}
				>
					<>
						<TextControl
							label="Titre du cta"
							value={ctaTextLabel}
							onChange={onChangeCtaTextLabel}
						/>
						<LinkControl
							label="Lien du cta"
							title={__("Call to action", "homegrade-blocks")}
							value={ctaLink}
							onChange={onChangeCtaLink}
						/>
					</>
				</PanelBody>
			</InspectorControls>
			<RichText
				{...useBlockProps({
					className: `homegrade-blocks-cta-slim`,
				})}
				tagName="p"
				placeholder="Tapez le texte de votre lien ici"
				value={ctaTextLabel}
				onChange={onChangeCtaTextLabel}
			/>
		</>
	);
}