import BookmarkAdd from "@material-symbols/svg-400/rounded/bookmark_add.svg";
import BookmarkAdded from "@material-symbols/svg-400/rounded/bookmark_added-fill.svg";
import BookmarkRemove from "@material-symbols/svg-400/rounded/bookmark_remove.svg";
import Bookmark from "@material-symbols/svg-400/rounded/bookmark-fill.svg";
import type { ComponentProps } from "react";
import { useTranslation } from "react-i18next";
import type { PressableProps } from "react-native";
import type { Serie } from "~/models";
import { IconButton, Menu, tooltip } from "~/primitives";
import { useAccount } from "~/providers/account-context";
import { useMutation } from "~/query";

type WatchStatus = NonNullable<Serie["watchStatus"]>["status"];
const WatchStatus = [
	"completed",
	"watching",
	"rewatching",
	"dropped",
	"planned",
] as const;

export const watchListIcon = (status: WatchStatus | null) => {
	switch (status) {
		case null:
			return BookmarkAdd;
		case "completed":
			return BookmarkAdded;
		case "dropped":
			return BookmarkRemove;
		default:
			return Bookmark;
	}
};

export const WatchListInfo = ({
	kind,
	slug,
	status,
	...props
}: {
	kind: "movie" | "serie" | "episode";
	slug: string;
	status: WatchStatus | null;
} & Partial<ComponentProps<typeof IconButton<PressableProps>>>) => {
	const account = useAccount();
	const { t } = useTranslation();

	const mutation = useMutation({
		path: ["api", `${kind}s`, slug, "watchstatus"],
		compute: (newStatus: WatchStatus | null) => ({
			method: newStatus ? "POST" : "DELETE",
			body: newStatus ? { status: newStatus } : undefined,
		}),
		invalidate: ["api", `${kind}s`, slug],
		// optimistic is a pain to do because shows queries often have query params
	});
	const displayStatus = mutation.isPending ? mutation.variables : status;

	if (account == null) {
		return (
			<IconButton
				icon={BookmarkAdd}
				disabled
				{...tooltip(t("show.watchlistLogin"))}
				{...props}
			/>
		);
	}

	switch (displayStatus) {
		case null:
			return (
				<IconButton
					icon={BookmarkAdd}
					onPress={() => mutation.mutate("planned")}
					{...tooltip(t("show.watchlistAdd"))}
					{...props}
				/>
			);
		case "completed":
			return (
				<IconButton
					icon={BookmarkAdded}
					onPress={() => mutation.mutate(null)}
					{...tooltip(t("show.watchlistRemove"))}
					{...props}
				/>
			);
		case "planned":
		case "watching":
		case "rewatching":
		case "dropped":
			return (
				<Menu
					Trigger={IconButton}
					icon={watchListIcon(displayStatus)}
					{...tooltip(t("show.watchlistEdit"))}
					{...(props as any)}
				>
					{() => (
						<>
							{Object.values(WatchStatus).map((x) => (
								<Menu.Item
									key={x}
									label={t(`show.watchlistMark.${x}`)}
									onSelect={() => mutation.mutate(x)}
									selected={x === displayStatus}
								/>
							))}
							<Menu.Item
								label={t("show.watchlistMark.null")}
								onSelect={() => mutation.mutate(null)}
							/>
						</>
					)}
				</Menu>
			);
		default:
			return exhaustiveCheck(displayStatus);
	}
};

function exhaustiveCheck(v: never): never {
	return v;
}
