import { MAX_FILE_PATH_LENGTH } from "../../constants.ts";
import type { RepositoryRow } from "../../db/index.ts";
import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";
import { RepoHeader } from "../repos/RepoHeader.tsx";
import { RepoNav } from "./RepoNav.tsx";

interface FileEditProps {
    user: SessionUser;
    repo: RepositoryRow;
    ref: string;
    filePath: string;
    content: string;
    error?: string;
    queryError?: string;
}

export function FileEdit({
    user,
    repo,
    ref: editRef,
    filePath,
    content,
    error,
    queryError,
}: FileEditProps) {
    const parts = filePath.split("/");
    const filename = parts[parts.length - 1] ?? filePath;
    return (
        <Layout user={user} title={`Edit ${repo.name}/${filePath}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="code" user={user} />
                <div class="breadcrumb">
                    <a href={`/${repo.name}/tree/${editRef}`} safe>
                        {repo.name}
                    </a>
                    {parts.map((part, i) => {
                        const partPath = parts.slice(0, i + 1).join("/");
                        const isLast = i === parts.length - 1;
                        return (
                            <>
                                <span class="breadcrumb-sep">/</span>
                                {isLast ? (
                                    <span class="breadcrumb-current" safe>
                                        {part}
                                    </span>
                                ) : (
                                    <a
                                        href={`/${repo.name}/tree/${editRef}/${partPath}`}
                                        safe
                                    >
                                        {part}
                                    </a>
                                )}
                            </>
                        );
                    })}
                </div>
                <p class="form-hint">
                    WARNING: Line endings are normalized to LF (\n) on save.
                </p>
                {(!!error || !!queryError) && (
                    <p class="form-error" safe>
                        {error ?? queryError}
                    </p>
                )}
                <form
                    method="POST"
                    action={`/${repo.name}/edit/${editRef}/${filePath}`}
                >
                    <div class="file-blob-header">
                        <span class="file-blob-name" safe>
                            {filename}
                        </span>
                        <div class="file-blob-actions">
                            <a
                                href={`/${repo.name}/blob/${editRef}/${filePath}`}
                                class="btn btn-sm"
                            >
                                Cancel
                            </a>
                        </div>
                    </div>
                    <div class="file-blob-body">
                        <textarea
                            name="content"
                            class="file-edit-textarea"
                            rows="30"
                            spellcheck="false"
                            autocorrect="off"
                            autocapitalize="off"
                            {...{ autocomplete: "off" }}
                            safe
                        >
                            {content}
                        </textarea>
                    </div>
                    <div class="form-card">
                        <p
                            class="form-hint"
                            style="margin-bottom: var(--space-4);"
                        >
                            Committing directly to{" "}
                            <strong safe>{editRef}</strong>
                        </p>
                        <div class="form-group">
                            <label for="file-path">File path</label>
                            <input
                                id="file-path"
                                name="new_path"
                                type="text"
                                value={filePath}
                                class="mono"
                                maxlength={MAX_FILE_PATH_LENGTH}
                            />
                        </div>
                        <div class="form-group">
                            <label for="message">Commit message</label>
                            <textarea
                                id="message"
                                name="message"
                                rows="3"
                                required
                                safe
                            >
                                {`Edited ${filename}`}
                            </textarea>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                Commit changes
                            </button>
                            <a
                                href={`/${repo.name}/blob/${editRef}/${filePath}`}
                                class="btn"
                            >
                                Cancel
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </Layout>
    );
}