import { __ } from "@wordpress/i18n";
import {
	registerFormatType,
	toggleFormat,
	applyFormat,
	getActiveFormats,
	getTextContent,
	getActiveObject,
	RichTextValue,
} from "@wordpress/rich-text";
import { RichTextToolbar, RichTextToolbarButton } from "@wordpress/block-editor";

import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, Button, ToolbarGroup, ToolbarButton, TextareaControl } from "@wordpress/components";
import { check, trash } from "@wordpress/icons";
import { useState } from "@wordpress/element";
import { useSelect, useDispatch } from "@wordpress/data"; // pour les querry
import { useEffect } from "@wordpress/element";

const formatName = "homegrade-format/tooltip";

const Edit = (props) => {
	const { isActive, value, onChange } = props;
	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
	const [popoverText, setPopoverText] = useState("");

	// const [relatedVocabulairePostId, setRelatedVocabulairePostId] = useState(null);
	// const [definition, setDefinition] = useState(null);

	// #### ACTIVE CURRENT FORMAT
	const activeFormat = getActiveFormats(props.value).filter((format) => format.type === formatName)[0];

	// #### CURRENT RELATED POST
	const post = useSelect((select) => {
		if (activeFormat && activeFormat.attributes.definitionId) {
			return select("core").getEntityRecord("postType", "vocabulaire", 940);
		}
	});

	function handleFormat() {
		setIsPopoverOpen(!isPopoverOpen);
		onChange(
			toggleFormat(value, {
				type: formatName,
				attributes: {
					bonbah: "tqsqsdq",
					dataTooltip: popoverText,
					style: "text-decoration: underline;",
				},
			})
		);
	}
	function removeFormat() {
		setIsPopoverOpen(false);
		onChange(
			toggleFormat(value, {
				type: formatName,
			})
		);
	}
	function handleChange(value, postDatas) {
		const post = useSelect((select) => {
			if (activeFormat && activeFormat.attributes.definitionId) {
				return select("core").getEntityRecord("postType", "vocabulaire", 940);
			}
		});
		onChange(
			applyFormat(value, {
				type: formatName,
				attributes: {
					definitionId: postDatas.id.toString(),
					dataTooltip:
						"this is a test text, normally pulled from above 'post' variable  ",
				},
			})
		);
	}

	return (
		<>
			<BlockControls>
				{isPopoverOpen && (
					<Popover
						onClose={() => setIsPopoverOpen(false)}
						className='popover_tooltip_field'>
						<LinkControl
							suggestionsQuery={{
								type: "post",
								subtype: "vocabulaire",
							}}
							onChange={(postDatas) => handleChange(value, postDatas)}
						/>
						<TextareaControl
							label='Text explicatif'
							help='Texte apparraissant au survol de la tooltip'
							onChange={(value) => setPopoverText(value)}
						/>
						<Button
							icon={check}
							variant='primary'
							onClick={() => {
								setIsPopoverOpen(false);
								handleFormat();
							}}>
							Valider
						</Button>
					</Popover>
				)}

				<ToolbarGroup>
					<ToolbarButton
						isActive={isActive}
						icon={!isActive ? "admin-comments" : trash}
						label={!isActive ? "Ajouter une tooltip" : "Supprimer la tooltip"}
						onClick={() => {
							!isActive ? setIsPopoverOpen(true) : removeFormat();
						}}
					/>
				</ToolbarGroup>
			</BlockControls>
		</>
	);
};

registerFormatType(formatName, {
	title: __("Tooltip", "homegrade-format"),
	tagName: "span",
	attributes: {
		definitionId: "data-definition-id",
		dataTooltip: "data-tooltip",
	},
	className: "tooltip-word",
	edit: Edit,
});
