import { Card, TextField } from "./components/index.js";

const GalleryShortcode = {
	label: "Bildergallerie",
	openTag: "{{< ",
	closeTag: " >}}",
	separator: " ",
	toProps: (args) => {
		if (args.length > 0) {
			return {
				dir:
					args
						.find((arg) => arg.startsWith("dir="))
						?.split("=")[1]
						.replaceAll('"', "") ?? "",
			};
		}
		return { dir: "" };
	},
	toArgs: ({ dir }) => {
		return [`dir=\"${dir}\"`];
	},
	control: ({ dir, onChange, controlProps }) => {
		const { collection, field } = controlProps;

		const handleChange = ({ path }) => {
			onChange({ dir: path });
		};

		const handleOpenMediaLibrary = useMediaInsert(
			dir,
			{ collection, field, forFolder: true },
			handleChange
		);

		return Card([
			TextField({
				label: "Gallerie-Ordner",
				value: dir,
				onChange: (event) => {
					onChange({ dir: event.target.value });
				},
			}),
			h(
				"span",
				{ key: "gallery-button", className: "flex gap-2 pt-2 px-2" },
				h(
					"button",
					{
						type: "button",
						onClick: handleOpenMediaLibrary,
						className: "btn btn-contained-primary",
					},
					"wählen"
				)
			),
		]);
	},
	preview: ({ dir }) => {
		return h(
			"div",
			{ className: "card mb-4" },
			h(
				"div",
				{ className: "card-body mb-0" },
				h("div", { className: "card-title h4" }, "Gallerie-Ordner"),
				h("div", { className: "card-text" }, dir)
			)
		);
	},
};

export default GalleryShortcode;