import { registerFormatType, toggleFormat, applyFormat, getActiveFormats } from "@wordpress/rich-text";
import { __ } from "@wordpress/i18n";
import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, Button } from "@wordpress/components";

import { ToolbarGroup, ToolbarButton, TextareaControl } from "@wordpress/components";
import { check, trash } from "@wordpress/icons";

import { useState } from "@wordpress/element";
import { useSelect } from "@wordpress/data"; // pour les querry

const formatName = "homegrade-format/brochure-format";

const BrochureLinkFormatButton = (props) => {
	const { isActive, value, onChange } = props;
	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
	const [relatedPost, setRelatedPost] = useState("");
	const [pendingBrochure, setPendingBrochure] = useState(false);

	const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];

	const brochurePost = useSelect((select) => {
		if (activeFormat && activeFormat.attributes.brochurePostID) {
			return select("core").getEntityRecord(
				"postType",
				"brochures",
				activeFormat.attributes.brochurePostID
			);
		}
	});

	const brochureAttachedMedia = useSelect((select) => {
		if (brochurePost && brochurePost.acf && brochurePost.acf.brochure_pdf) {
			return select("core").getEntityRecord("postType", "attachment", brochurePost.acf.brochure_pdf);
		}
	});

	function setFormat(postDatas) {
		setIsPopoverOpen(!isPopoverOpen);
		setPendingBrochure(true);
		onChange(
			applyFormat(value, {
				type: formatName,
				attributes: {
					href: postDatas.url,
					brochurePostID: postDatas.id.toString(),
					target: "_blank",
					style: "text-decoration: underline;",
				},
			})
		);
	}

	function removeFormat() {
		setIsPopoverOpen(false);
		onChange(
			toggleFormat(value, {
				type: formatName,
			})
		);
	}

	// if (brochurePost && brochureAttachedMedia && pendingBrochure) {
	// 	onChange(
	// 		applyFormat(value, {
	// 			type: formatName,
	// 			attributes: {
	// 				target: "_blank",
	// 				brochurePostID: brochurePost.id.toString(),
	// 				brochureID: brochureAttachedMedia.id.toString(),
	// 				href: brochurePost.link,
	// 				style: "text-decoration: underline;",
	// 			},
	// 		})
	// 	);
	// 	setPendingBrochure(false);
	// }

	return (
		<>
			<BlockControls>
				{isPopoverOpen && (
					<Popover
						onClose={() => setIsPopoverOpen(false)}
						className='popover_tooltip_field'>
						<LinkControl
							suggestionsQuery={{
								type: "post",
								subtype: ["brochures", "fiches-infos"],
								// subtype: "application/pdf", // Not working
								// mime_type: "application/pdf", // Not working
							}}
							value={relatedPost}
							onChange={setFormat}
						/>
					</Popover>
				)}

				<ToolbarGroup className='test'>
					<ToolbarButton
						isActive={isActive}
						icon={!isActive ? "book" : trash}
						label={
							!isActive
								? "Ajouter un lien Brochure / Fiche-info"
								: "Supprimer le lien Brochure / Fiche-info"
						}
						onClick={() =>
							!isActive ? setIsPopoverOpen(!isPopoverOpen) : removeFormat()
						}
					/>
				</ToolbarGroup>
			</BlockControls>
		</>
	);
};

registerFormatType("homegrade-format/brochure-format", {
	title: "Lien Brochure/Fiche-info",
	tagName: "a",
	attributes: {
		brochureID: "brochure-id",
		brochurePostID: "brochure-post-id",
	},
	className: "brochure-link-format",
	edit: BrochureLinkFormatButton,
});
