import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { useEntityRecord } from "@wordpress/core-data";
import { useState } from "@wordpress/element";
import { useSelect, useDispatch } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
import { useEntityProp } from "@wordpress/core-data";
import chevronDown from "./img/chevron_down.svg";

export default function Edit({ attributes, setAttributes }) {
	let { tooltipWords } = attributes;
	let [hasFetchedDatas, setHasFetchedDatas] = useState(false);

	function CurrentThematiqueDisplay({ id }) {
		const { record, isResolving } = useEntityRecord(
			"taxonomy",
			"thematiques",
			id
		);

		if (isResolving) {
			return "Loading...";
		}
		if (!record) {
			return "no post...";
		}
		return record.name;
	}
	function getCurrentThematique(id) {
		const { record, isResolving } = useEntityRecord(
			"taxonomy",
			"thematiques",
			id
		);

		if (isResolving) {
			return "Loading...";
		}
		if (!record) {
			return "no post...";
		}
		return record;
	}

	function filterToolTipsArray(tooltipWords) {
		const filteredTooltipWords = [];

		tooltipWords.forEach((tooltipWord) => {
			const existingTooltip = filteredTooltipWords.find(
				(item) => item.tooltipID === tooltipWord.tooltipID
			);

			if (!existingTooltip) {
				filteredTooltipWords.push(tooltipWord);
			}
		});

		return filteredTooltipWords;
	}
	function parseContentTooltips(editorContent) {
		const parser = new DOMParser();
		const doc = parser.parseFromString(editorContent, "text/html");
		const domTooltipWords = doc.querySelectorAll(".tooltip-word");

		const tooltipWords = [];

		// Looping over tooltip words and filtering duplicates
		Array.from(domTooltipWords).forEach((tooltipWord) => {
			const tooltipID = tooltipWord.getAttribute("data-definition-id");
			const tooltipText = tooltipWord.getAttribute("data-tooltip-word");
			const tooltipDefinition = tooltipWord.getAttribute(
				"data-tooltip-definition"
			);

			tooltipWords.push({
				tooltipID,
				tooltipText,
				tooltipDefinition,
			});
		});
		return tooltipWords;
	}
	function parseBlocksTooltips(currentBlocks) {
		const blocksTooltipWords = [];
		currentBlocks.forEach((block) => {
			if (
				block.name === "homegrade-content-blocks/questions-container" &&
				block.attributes &&
				block.attributes.tooltipsWordsUsed &&
				block.attributes.tooltipsWordsUsed.length > 0
			) {
				block.attributes.tooltipsWordsUsed.forEach((tooltipWord) => {
					blocksTooltipWords.push(tooltipWord);
				});
			}
		});

		return blocksTooltipWords;
	}
	function buildTooltipWords() {
		let newParsedTooltipWords = parseContentTooltips(currentPost.content);
		let newBlocksTooltipWords = parseBlocksTooltips(currentBlocks);
		let allTooltipWords = [...newParsedTooltipWords, ...newBlocksTooltipWords];
		const filteredTooltipWords = filterToolTipsArray(allTooltipWords);

		return filteredTooltipWords;
	}

	function compareHasNewVocabularyWord(previousWords, newWords) {
		return !(JSON.stringify(previousWords) === JSON.stringify(newWords));
	}

	const currentPost = useSelect((select) =>
		select("core/editor").getCurrentPost()
	);

	const currentBlocks = useSelect((select) =>
		select("core/block-editor").getBlocks()
	);

	const currentTaxonomies = useSelect((select) =>
		select("core/editor").getCurrentPostAttribute("thematiques")
	);

	let currentThematique = useSelect(
		(select) =>
			select("core").getEntityRecord(
				"taxonomy",
				"thematiques",
				currentTaxonomies[0] // or currentPost.thematiques[0] works as well
			),
		[currentTaxonomies]
	);
	function getAdminLanguageFromCookie(c_name) {
		var c_value = document.cookie,
			c_start = c_value.indexOf(" " + c_name + "=");
		if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
		if (c_start == -1) {
			c_value = null;
		} else {
			c_start = c_value.indexOf("=", c_start) + 1;
			var c_end = c_value.indexOf(";", c_start);
			if (c_end == -1) {
				c_end = c_value.length;
			}
			c_value = unescape(c_value.substring(c_start, c_end));
		}
		return c_value;
	}
	const currentLang = getAdminLanguageFromCookie("wp-wpml_current_language");
	const localBlockName = currentLang === "fr" ? "Vocabulaire" : "Woordenschat";
	useEffect(() => {
		if (currentPost.content && currentBlocks) {
			const newTooltipWords = buildTooltipWords();

			if (compareHasNewVocabularyWord(tooltipWords, newTooltipWords)) {
				setAttributes({ tooltipWords: newTooltipWords });
			}
		}
	}, [currentPost, currentBlocks]);

	console.log(__("bonjour", "homegrade-blocks"));
	return (
		<section
			{...useBlockProps({
				className: `homegrade-blocks-vocabulaire-summary`,
			})}
		>
			<h2 className="homegrade-blocks-vocabulaire-summary__title">
				{localBlockName + " — "}
				{currentThematique && currentThematique.name
					? currentThematique.name
					: "...pas de thématique"}
			</h2>
			{tooltipWords &&
				tooltipWords.map((elem) => (
					<details className="question">
						<summary>
							{elem.tooltipText}
							<div className="open-close-icon">
								<img src={chevronDown} className="open-close-cta" alt="" />
							</div>
						</summary>
						<div className="homegrade-blocks-vocabulaire-summary__content-wrapper">
							<p className="homegrade-blocks-vocabulaire-summary__content">
								{elem.tooltipDefinition}
							</p>
						</div>
					</details>
				))}
		</section>
	);
}