import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { LayoutMode, useBookmarkPageStore } from "./-store"
import clsx from "clsx"
import { fetchApi, useAuthenticatedQuery } from "~/api"
import { LoadingSpinner } from "~/components/loading-spinner"
import { BookmarkList } from "./-bookmark-list"
import { useCallback } from "react"
import type { LinkBookmark } from "@markone/core/bookmark"
import { ActionBar } from "./-action-bar"

export const Route = createFileRoute("/bookmarks/$bookmarkId")({
	component: RouteComponent,
})

function RouteComponent() {
	return (
		<Main>
			<BookmarkListSidebar />
			<BookmarkPreviewContainer>
				<BookmarkPreview />
			</BookmarkPreviewContainer>
		</Main>
	)
}

function Main({ children }: React.PropsWithChildren) {
	const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
	return (
		<main className={clsx("w-full h-full grid", layoutMode === LayoutMode.SideBySide ? "grid-cols-4" : "grid-cols-1")}>
			{children}
		</main>
	)
}

function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
	const layoutMode = useBookmarkPageStore((state) => state.layoutMode)

	return (
		<div
			className={clsx("col-span-3 h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900", {
				"absolute border-l-0": layoutMode === LayoutMode.Popup,
			})}
		>
			{children}
		</div>
	)
}

function BookmarkListSidebar() {
	return (
		<div className="flex flex-col py-16 w-full h-screen relative">
			<header className="mb-4 text-start">
				<h1 className="font-bold text-start mb-4">
					<span className="invisible">&nbsp;&gt;&nbsp;</span>
					YOUR BOOKMARKS
				</h1>
			</header>
			<BookmarkListContainer />
			<ActionBar className="absolute bottom-0 left-0 right-0" />
		</div>
	)
}

function BookmarkListContainer() {
	const { bookmarkId } = Route.useParams()
	const navigate = useNavigate()
	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
		fetchApi("/bookmarks").then((res) => res.json()),
	)
	const handleBookmarkListItemAction = useBookmarkPageStore((state) => state.handleBookmarkListItemAction)

	const onSelectedBookmarkChange = useCallback(
		(bookmark: LinkBookmark) => {
			navigate({ to: `/bookmarks/${bookmark.id}` })
		},
		[navigate],
	)

	switch (status) {
		case "success":
			return (
				<BookmarkList
					alwaysExpandItem
					bookmarks={bookmarks}
					selectedBookmarkId={bookmarkId}
					onSelectionChange={onSelectedBookmarkChange}
					onItemAction={handleBookmarkListItemAction}
				/>
			)

		case "pending":
			return (
				<p>
					Loading <LoadingSpinner />
				</p>
			)

		case "error":
			return <p>error loading bookmarks</p>
	}
}

function BookmarkPreview() {
	const { bookmarkId } = Route.useParams()
	const { data, status } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
		fetchApi(`/bookmark/${bookmarkId}`, {
			headers: {
				Accept: "text/html",
			},
		}).then((res) => res.text()),
	)

	switch (status) {
		case "pending":
			return (
				<p>
					Loading <LoadingSpinner />
				</p>
			)
		case "success":
			return <iframe key="preview-iframe" title="asd" className="w-full h-full" srcDoc={data} />

		default:
			return null
	}
}