import type { RepositoryRow } from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import type { TreeEntry } from "../../services/git.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { BranchSelector } from "./BranchSelector.tsx";
import { FileTreeTable } from "./FileTreeTable.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface FileTreeProps {
    user: SessionUser | null;
    repo: RepositoryRow;
    ref: string;
    subpath: string;
    entries: TreeEntry[];
    branches: string[];
    tags?: string[];
    readmeHtml?: string | null;
    readmePath?: string;
}

export function FileTree({
    user,
    repo,
    ref: treeRef,
    subpath,
    entries,
    branches,
    tags,
    readmeHtml,
    readmePath,
}: FileTreeProps) {
    const parts = subpath ? subpath.split("/") : [];
    return (
        <Layout
            user={user}
            title={`${repo.name}${subpath ? `/${subpath}` : ""}`}
        >
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="code" user={user} />
                <div class="tree-toolbar">
                    <BranchSelector
                        repoName={repo.name}
                        branches={branches}
                        tags={tags}
                        currentRef={treeRef}
                        view="tree"
                        path={subpath}
                    />
                    {branches.includes(treeRef) && user?.isAdmin && (
                        <a
                            href={`/${repo.name}/new-file/${treeRef}${subpath ? `?dir=${encodeURIComponent(subpath)}` : ""}`}
                            class="btn btn-sm btn-primary"
                        >
                            New file
                        </a>
                    )}
                </div>
                {!!subpath && (
                    <div class="breadcrumb">
                        <a href={`/${repo.name}/tree/${treeRef}`} safe>
                            {repo.name}
                        </a>
                        {parts.map((part, i) => {
                            const partPath = parts.slice(0, i + 1).join("/");
                            return (
                                <>
                                    <span class="breadcrumb-sep">/</span>
                                    <a
                                        href={`/${repo.name}/tree/${treeRef}/${partPath}`}
                                        safe
                                    >
                                        {part}
                                    </a>
                                </>
                            );
                        })}
                    </div>
                )}
                <FileTreeTable
                    repoName={repo.name}
                    treeRef={treeRef}
                    subpath={subpath}
                    entries={entries}
                />
                {!!readmeHtml && (
                    <div class="readme-section">
                        <div class="readme-header">
                            <span>README</span>
                            {!!readmePath && (
                                <a
                                    href={`/${repo.name}/raw/${treeRef}/${readmePath}`}
                                    class="btn btn-sm"
                                >
                                    Raw
                                </a>
                            )}
                        </div>
                        <div class="markdown-body">{readmeHtml as "safe"}</div>
                    </div>
                )}
            </div>
        </Layout>
    );
}