import { registerPlugin } from "@wordpress/plugins";
import { Button, DateTimePicker, Dropdown } from "@wordpress/components";
import { PluginDocumentSettingPanel } from "@wordpress/editor";
import { useSelect, useDispatch } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import { useState } from "@wordpress/element";
import { dateI18n, format, getSettings } from "@wordpress/date";

const ModificationDatePanel = () => {
	const { modificationDate } = useSelect((select) => {
		const meta = select("core/editor").getEditedPostAttribute("meta");
		return {
			modificationDate: meta?.article_modification_date || "",
		};
	});

	const { editPost } = useDispatch("core/editor");
	const settings = getSettings();

	const updateModificationDate = (newDate) => {
		const formattedDate = format("Y-m-d H:i:s", newDate);
		editPost({
			meta: {
				article_modification_date: formattedDate,
			},
		});
	};

	const clearModificationDate = () => {
		editPost({
			meta: {
				article_modification_date: "",
			},
		});
	};

	// Formater la date pour l'affichage
	const displayDate = modificationDate
		? dateI18n(settings.formats.datetime, modificationDate)
		: __("Non définie", "dynamiques-modification-date");

	return (
		<PluginDocumentSettingPanel
			name='modification-date-panel'
			title={__("Dernière mise à jour du papier", "dynamiques-modification-date")}>
			<div
				style={{
					marginBottom: "12px",
					fontSize: "12px",
					color: "#757575",
				}}>
				{__(
					"Choisissez ici la dernière date de révision de cet article",
					"dynamiques-modification-date"
				)}
			</div>

			<div style={{ marginBottom: "16px" }}>
				{modificationDate ? (
					<Dropdown
						popoverProps={{ placement: "bottom-start" }}
						contentClassName='edit-post-post-schedule__dialog'
						renderToggle={({ isOpen, onToggle }) => (
							<Button
								variant='secondary'
								onClick={onToggle}
								aria-expanded={isOpen}
								style={{
									textAlign: "left",
									width: "100%",
									justifyContent: "flex-start",
									color: "#1e1e1e",
								}}>
								{displayDate}
							</Button>
						)}
						renderContent={({ onClose }) => (
							<div style={{ padding: "16px" }}>
								<DateTimePicker
									currentDate={modificationDate}
									onChange={(newDate) => {
										updateModificationDate(newDate);
										onClose();
									}}
									is12Hour={settings.formats.time.includes("a")}
								/>
								<div
									style={{
										marginTop: "16px",
										display: "flex",
										gap: "8px",
									}}>
									<Button
										variant='secondary'
										onClick={() => {
											clearModificationDate();
											onClose();
										}}>
										{__(
											"Effacer",
											"dynamiques-modification-date"
										)}
									</Button>
								</div>
							</div>
						)}
					/>
				) : (
					<Button
						variant='secondary'
						onClick={() => updateModificationDate(new Date())}
						style={{
							textAlign: "left",
							width: "100%",
							justifyContent: "flex-start",
							color: "#757575",
						}}>
						{displayDate}
					</Button>
				)}
			</div>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin("modification-date-panel", {
	render: ModificationDatePanel,
});