import { Popover } from "@kobalte/core/popover";
import { type Component, For, Show } from "solid-js";
import { base } from "../network";
import { useNotifications } from "../ProtectedRoute";

const LoadingCircle: Component<{
	status: "loading" | "complete";
	class?: string;
}> = (props) => {
	switch (props.status) {
		case "loading":
			return (
				<svg
					class={props.class}
					width="24"
					height="24"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<circle
						cx="12"
						cy="12"
						r="10"
						fill="none"
						stroke-width="3"
						class="stroke-amber-400"
					/>
				</svg>
			);
		case "complete":
			return (
				<svg
					class={props.class}
					width="24"
					height="24"
					viewBox="0 0 24 24"
					xmlns="http://www.w3.org/2000/svg"
				>
					<circle
						cx="12"
						cy="12"
						r="10"
						fill="none"
						stroke-width="3"
						class="stroke-emerald-400"
					/>
				</svg>
			);
	}
};

export const ProcessingImages: Component = () => {
	const notifications = useNotifications();

	const processingNumber = () =>
		Object.keys(notifications.state.ProcessingImages).length;

	return (
		<Popover sameWidth gutter={4}>
			<Popover.Trigger class="w-full flex justify-between rounded-xl bg-slate-800 text-gray-100 px-4 py-2">
				<Show
					when={processingNumber() > 0}
					fallback={<p class="text-md">No images to process</p>}
				>
					<p class="text-md">
						Processing {processingNumber()}{" "}
						{processingNumber() === 1 ? "image" : "images"}
					</p>
				</Show>
				<Show
					when={processingNumber() === 0}
					fallback={<LoadingCircle status="loading" />}
				>
					<LoadingCircle status="complete" />
				</Show>
			</Popover.Trigger>
			<Popover.Portal>
				<Popover.Content class="shadow-2xl flex flex-col gap-2 bg-slate-800 rounded-xl p-2">
					<For each={Object.entries(notifications.state.ProcessingImages)}>
						{([id, _image]) => (
							<Show when={_image}>
								{(image) => (
									<div class="flex gap-2 w-full justify-center">
										<img
											class="w-16 h-16 aspect-square rounded"
											alt="processing"
											src={`${base}/image/${id}`}
										/>
										<div class="flex flex-col gap-1">
											<p class="text-slate-100">{image().ImageName}</p>
										</div>
										<LoadingCircle
											status="loading"
											class="ml-auto self-center"
										/>
									</div>
								)}
							</Show>
						)}
					</For>
				</Popover.Content>
			</Popover.Portal>
		</Popover>
	);
};
