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 NewFileFormProps {
    user: SessionUser;
    repo: RepositoryRow;
    ref: string;
    dir?: string;
    error?: string;
}

export function NewFileForm({
    user,
    repo,
    ref: treeRef,
    dir,
    error,
}: NewFileFormProps) {
    const defaultPath = dir ? `${dir}/` : "";
    const cancelHref = dir
        ? `/${repo.name}/tree/${treeRef}/${dir}`
        : `/${repo.name}/tree/${treeRef}`;
    return (
        <Layout user={user} title={`New file — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="code" user={user} />
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <form
                    method="POST"
                    action={`/${repo.name}/new-file/${treeRef}`}
                >
                    <div class="file-blob-header">
                        <span class="file-blob-name">New file</span>
                        <div class="file-blob-actions">
                            <a href={cancelHref} class="btn btn-sm">
                                Cancel
                            </a>
                        </div>
                    </div>
                    <div class="file-blob-body">
                        <textarea
                            name="content"
                            class="file-edit-textarea"
                            rows="20"
                            spellcheck="false"
                            autocorrect="off"
                            autocapitalize="off"
                            {...{ autocomplete: "off" }}
                            placeholder="File contents..."
                        />
                    </div>
                    <div class="form-card">
                        <p
                            class="form-hint"
                            style="margin-bottom: var(--space-4);"
                        >
                            Creating file on <strong safe>{treeRef}</strong>
                        </p>
                        <div class="form-group">
                            <label for="file-path">File path</label>
                            <input
                                id="file-path"
                                name="path"
                                type="text"
                                required
                                value={defaultPath}
                                placeholder="path/to/file.txt"
                                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"
                                placeholder="Add new file"
                            />
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                Create file
                            </button>
                            <a href={cancelHref} class="btn">
                                Cancel
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </Layout>
    );
}