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 (
		<Show when={processingNumber() > 0}>
			<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>
		</Show>
	);
};