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 "../repos/RepoNav.tsx";

interface NewIssueProps {
    user: SessionUser;
    repo: RepositoryRow;
    error?: string;
    template?: string;
}

export function NewIssue({ user, repo, error, template }: NewIssueProps) {
    return (
        <Layout user={user} title={`New issue — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="issues" user={user} />
                <h2 class="section-title">New issue</h2>
                {error && <p class="form-error">{error}</p>}
                <form
                    method="POST"
                    action={`/${repo.name}/issues`}
                    class="form-card"
                >
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input
                            id="title"
                            name="title"
                            type="text"
                            required
                            placeholder="Short, descriptive title"
                        />
                    </div>
                    <div class="form-group">
                        <label for="body">
                            Description{" "}
                            <span class="text-muted">
                                (Markdown supported, optional)
                            </span>
                        </label>
                        <textarea
                            id="body"
                            name="body"
                            rows="10"
                            placeholder="Describe the issue..."
                        >
                            {template ?? ""}
                        </textarea>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            Submit issue
                        </button>
                        <a href={`/${repo.name}/issues`} class="btn btn-ghost">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </Layout>
    );
}