import { __ } from "@wordpress/i18n";
import { InspectorControls } from "@wordpress/block-editor";
import {
	PanelBody,
	SelectControl,
	ComboboxControl,
} from "@wordpress/components";
import "./editor.scss";
import { Tip, CheckboxControl } from "@wordpress/components";

import { useSelect } from "@wordpress/data";
import { useEffect, useState } from "@wordpress/element";
import { decodeEntities } from "@wordpress/html-entities";

export default function OptionsSelectControl({
	setAttributes,
	relatedPostId,
	postDescription,
	hasDescription,
	postType,
}) {
	if (!postType || !setAttributes) return <p>Loading</p>;

	let [postOptions, setPostOptions] = useState(null);

	const lang = getAdminLanguageFromCookie("wp-wpml_current_language");
	const optionPages = useSelect(
		(select) => {
			if (!postType) return null;
			let query = {
				status: ["publish", "draft"],
				per_page: -1,
				lang: lang,
			};
			return select("core").getEntityRecords("postType", postType, query);
		},
		[postType, lang]
	);
	const editUrl = relatedPostId
		? `${window.location.origin}/wp-admin/post.php?post=${relatedPostId}&action=edit`
		: null;
	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;
	}

	function handleHasDescriptionChange(hasDescription) {
		setAttributes({ hasDescription });
	}

	function handleRelatedPostChange(postId) {
		setAttributes({ relatedPostId: Number(postId) });
	}
	function handlePostTypeChange(postType) {
		setAttributes({ postType: postType, relatedPostId: null });
	}

	function buildSelectOptions(optionPages) {
		let options = [];
		if (optionPages && optionPages.length > 0) {
			options.push({ value: 0, label: "Selectionnez une page" });
			optionPages.forEach((page) => {
				options.push({
					value: page.id,
					label: decodeEntities(page.title.rendered),
				});
			});
		} else {
			options.push({ value: 0, label: "Pas encore de questions..." });
		}
		return options;
	}

	useEffect(() => {
		if (!optionPages || !postType) return;
		if (optionPages && optionPages.length > 0) {
			setPostOptions(buildSelectOptions(optionPages));
		}
	}, [optionPages, postType]);

	let panelTitle = "Post Reliée";

	return (
		<InspectorControls>
			<PanelBody title={__("Contenu Reliée", "homegrade-blocks")}>
				<SelectControl
					label={__("Type de post", "homegrade-blocks")}
					options={[
						{ value: "conseils", label: "Conseils" },
						{ value: "fiches-infos", label: "Fiches infos" },
						{ value: "questions", label: "Questions" },
						{ value: "videos-webinaires", label: "Videos / Webinaires" },
						{ value: "brochures", label: "Brochures" },
					]}
					value={postType ?? null}
					onChange={handlePostTypeChange}
				/>

				{postOptions && (
					<ComboboxControl
						label={panelTitle}
						value={relatedPostId}
						options={postOptions}
						onChange={(e) => handleRelatedPostChange(e)}
					/>
				)}
				{relatedPostId && (
					<Tip>
						{__(
							"Pour modifier le contenu de la question affichée ici, rendez-vous dans la fiche question correspondante.",
							"homegrade-blocks"
						)}
					</Tip>
				)}
				{relatedPostId && editUrl && (
					<a href={editUrl} className="edit-question-button">
						Éditer le post
					</a>
				)}
			</PanelBody>
			<PanelBody
				title={__("Texte descriptif", "homegrade-blocks")}
				initialOpen={false}
			>
				<CheckboxControl
					label="Texte descriptif"
					help="À cocher pour afficher un texte descriptif libre"
					checked={hasDescription}
					onChange={handleHasDescriptionChange}
				/>
			</PanelBody>
		</InspectorControls>
	);
}