import config from "../../config.ts";
import type { LabelRow, RepositoryRow } from "../../db/index.ts";
import { labelTextColor } from "../../lib/labelColor.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;
    labels: LabelRow[];
}

export function NewIssue({
    user,
    repo,
    error,
    template,
    labels,
}: 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" safe>
                        {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
                            maxlength={config.MAX_TITLE_BYTES}
                            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"
                            maxlength={config.MAX_TEXT_BODY_BYTES}
                            placeholder="Describe the issue..."
                            safe
                        >
                            {template ?? ""}
                        </textarea>
                    </div>
                    {labels.length > 0 &&
                        (user.isAdmin || repo.allow_user_labels === 1) && (
                            <div class="form-group">
                                <span class="form-group-label">Labels</span>
                                <div class="label-checkbox-list">
                                    {labels.map((label) => (
                                        <label class="label-checkbox-item">
                                            <input
                                                type="checkbox"
                                                name="label_ids"
                                                value={String(label.id)}
                                            />
                                            <span
                                                class="label-badge"
                                                style={`background:${label.color};color:${labelTextColor(label.color)}`}
                                                safe
                                            >
                                                {label.name}
                                            </span>
                                        </label>
                                    ))}
                                </div>
                            </div>
                        )}
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            Submit issue
                        </button>
                        <a href={`/${repo.name}/issues`} class="btn">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </Layout>
    );
}