import { type Accessor, createMemo, createResource, Show } from "solid-js";
import { getUserRepoByRkey } from "../../../util/get_repo";
import { figureOutHandle } from "../../../util/handle";
import type { DID } from "../../../util/types";
import { useRepoInfo } from "../context";

function HeaderItem(props: {
	path: string;
	title: string;
	icon: string;
	windowPath: Accessor<string>;
}) {
	return (
		<a
			class={`flex h-full w-min flex-row content-center items-center gap-2 rounded-t px-4 py-1 ${props.windowPath() === props.title ? "bg-white dark:bg-gray-800" : "hover:dark:bg-gray-700/25"}`}
			href={props.path}
		>
			<div class={`iconify ${props.icon}`} />
			{props.title}
		</a>
	);
}

export function Header(props: { user: string; repo: string }) {
	const repoInfo = useRepoInfo();
	const path = createMemo(() => {
		const path = window.location.pathname.split("/")[3];
		return ["issues", "pulls", "pipelines"].includes(path) ? path : "overview";
	});

	const [forkedInfo] = createResource(
		() => repoInfo()?.repo,
		(repo) =>
			(async () => {
				if (!repo.source) return;
				const [, , did, , rkey] = repo.source.split("/");
				if (rkey === repo.rkey) return;
				return {
					did: did as DID,
					repo: await getUserRepoByRkey(did as DID, rkey),
				};
			})(),
	);

	const [forkedHandle] = createResource(forkedInfo, (forkedInfo) =>
		(async () => await figureOutHandle(forkedInfo.did))(),
	);

	return (
		<Show when={repoInfo()} keyed>
			{(repoInfo) => (
				<div class="flex flex-col">
					<div class="m-5 mt-0 flex flex-row items-center justify-between gap-0.5">
						<div class="flex flex-col gap-1 text-xs">
							<Show when={forkedInfo()?.repo && forkedHandle()} keyed>
								<div class="flex flex-row items-center gap-1">
									<div class="iconify gravity-ui--code-fork" />
									<span>
										forked from{" "}
										<a
											href={`/${forkedHandle()}/${forkedInfo()!.repo!.name}`}
											class="underline hover:text-gray-700 dark:hover:text-gray-200"
										>{`@${forkedHandle()}/${forkedInfo()!.repo!.name}`}</a>
									</span>
								</div>
							</Show>
							<div class="flex flex-row items-center gap-1 text-base">
								<a
									class="hover:text-gray-700 hover:underline dark:hover:text-gray-200"
									href={`/${props.user}`}
								>
									@{props.user}
								</a>
								<span class="select-none text-xl">/</span>
								<a
									class="font-bold hover:text-gray-700 hover:underline dark:hover:text-gray-200"
									href={`/${props.user}/${props.repo}`}
								>
									{props.repo}
								</a>
							</div>
							<Show when={repoInfo.repo} keyed>
								{(repo) => <div class="text-xs">{repo.description}</div>}
							</Show>
						</div>
						<div class="flex flex-row gap-2">
							<button
								type="button"
								class="btn flex flex-row items-center gap-1"
							>
								<div class="iconify gravity-ui--star" />
								{repoInfo.stars.toString() || "0"}
							</button>
							<button
								type="button"
								class="btn flex flex-row items-center gap-1"
							>
								<div class="iconify gravity-ui--code-fork" />
								{repoInfo.forks.toString() || "0"}
							</button>
						</div>
					</div>
					<div class="mx-4 flex flex-row gap-1">
						<HeaderItem
							title="overview"
							path={`/${props.user}/${props.repo}`}
							icon="gravity-ui--square-list-ul"
							windowPath={path}
						/>
						{/*<HeaderItem
							title="issues"
							path={`/${props.user}/${props.repo}/issues`}
							icon="gravity-ui--circle-minus"
							windowPath={path}
						/>*/}
					</div>
				</div>
			)}
		</Show>
	);
}