import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { useSelect } from "@wordpress/data";
import {
	useBlockProps,
	RichText,
	BlockControls,
	InspectorControls,
	__experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";
import { PanelBody, TextControl, ToggleControl } from "@wordpress/components";
import { Tip } from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
	const {
		blockCustomTitle,
		hasCustomTitle,
		pageHeaderTitle,
		pageHeaderDescription,
		hasCta,
		cta,
	} = attributes;

	const pageTitle = useSelect((select) => {
		const { getEditedPostAttribute } = select("core/editor");
		return getEditedPostAttribute("title");
	});

	const pageIcon = useSelect((select) => {
		const currentPost = select("core/editor").getCurrentPost();
		if (currentPost && currentPost.acf && currentPost.acf.page_icon) {
			let cover = select("core").getMedia(currentPost.acf.page_icon);
			return cover;
		}
	});

	function onChangeBlockCustomTitle(blockCustomTitle) {
		setAttributes({ blockCustomTitle });
	}
	function onChangeTitle(newTitle) {
		setAttributes({ pageHeaderTitle: newTitle });
	}
	function onChangeHasCustomTitle(newHasAutoTitle) {
		setAttributes({ hasCustomTitle: !hasCustomTitle });
		if (newHasAutoTitle) {
			setAttributes({ blockCustomTitle: undefined });
		}
	}
	function onChangeHasCta(newHasCta) {
		setAttributes({ hasCta: !hasCta });
		if (!newHasCta) {
			setAttributes({ cta: undefined });
		}
	}
	function onChangeDescription(newDescription) {
		setAttributes({ pageHeaderDescription: newDescription });
	}
	function onChangeCTA(newCtaValue) {
		setAttributes({
			cta: {
				title: !cta || !cta.title ? newCtaValue.title : cta.title,
				id: newCtaValue.id,
				kind: newCtaValue.kind,
				type: newCtaValue.type,
				url: newCtaValue.url,
			},
		});
	}
	function onChangeTextControl(newCtaTitle) {
		setAttributes({
			cta: {
				...cta,
				title: newCtaTitle,
			},
		});
	}

	console.log(blockCustomTitle);
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="homegrade-blocks-content-page-header__panel-cta"
					title={__("Titre du bloc", "homegrade-blocks__texte-backoffice")}
				>
					<ToggleControl
						label="Titre automatique"
						checked={!hasCustomTitle}
						onChange={onChangeHasCustomTitle}
					/>
					{!hasCustomTitle && (
						<Tip>
							Le titre est automatiquement généré à partir du titre de la page
						</Tip>
					)}
				</PanelBody>
				<PanelBody
					className="homegrade-blocks-content-page-header__panel-cta"
					title={__("Call to action", "homegrade-blocks__texte-backoffice")}
				>
					<ToggleControl
						label="Afficher un call to action"
						checked={hasCta}
						onChange={onChangeHasCta}
					/>

					{hasCta && (
						<>
							<TextControl
								label="Titre du cta"
								value={cta && cta.title ? cta.title : ""}
								onChange={onChangeTextControl}
							/>
							<LinkControl
								label="Lien du cta"
								title={__(
									"Call to action",
									"homegrade-blocks__texte-backoffice"
								)}
								value={cta}
								onChange={onChangeCTA}
							/>
						</>
					)}
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-content-page-header block-content-page-header`,
				})}
			>
				<div class="block-content-page-header__content">
					{!hasCustomTitle && <h1>{pageTitle}</h1>}
					{hasCustomTitle && (
						<RichText
							tagName="h1"
							placeholder={__(
								"Ajouter ici le Titre du Bloc Header",
								"homegrade"
							)}
							value={blockCustomTitle}
							onChange={onChangeBlockCustomTitle}
						/>
					)}

					<RichText
						tagName="h2"
						placeholder={__("Ajouter ici le Titre du Bloc Header", "homegrade")}
						value={pageHeaderTitle}
						onChange={onChangeTitle}
						// style={{ textAlign: props.attributes.alignment }}
					/>
					<RichText
						tagName="p"
						placeholder={__(
							"Ajouter ici le texte d'introduction de cette page",
							"homegrade"
						)}
						value={pageHeaderDescription}
						onChange={onChangeDescription}
						// style={{ textAlign: props.attributes.alignment }}
					/>
					{cta && cta.title && cta.url && <a href={cta.url}>{cta.title}</a>}
				</div>
				{pageIcon && (
					<img
						className="block-content-page-header__page-icon"
						src={pageIcon.source_url}
						alt=""
					/>
				)}
			</section>
		</>
	);
}