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

interface NewReleaseProps {
    user: SessionUser;
    repo: RepositoryRow;
    error?: string;
    values?: {
        create_tag?: boolean;
        tag_name?: string;
        revision?: string;
        name?: string;
        notes?: string;
        include_source_code?: boolean;
    };
}

export function NewRelease({ user, repo, error, values }: NewReleaseProps) {
    const showTagFields = values?.create_tag ?? false;
    const defaultRevision =
        values?.revision !== undefined ? values.revision : repo.default_branch;
    return (
        <Layout user={user} title={`New Release — ${repo.name}`}>
            <div class="container">
                <RepoHeader repo={repo} />
                <RepoNav repo={repo} active="releases" user={user} />
                <div class="form-page">
                    <h2 class="page-title">New Release</h2>
                    {error && <div class="form-error">{error}</div>}
                    <form
                        method="post"
                        action={`/${repo.name}/releases`}
                        enctype="multipart/form-data"
                        class="form"
                    >
                        <div class="form-group">
                            <label class="form-label" for="name">
                                Release title{" "}
                                <span class="form-required">*</span>
                            </label>
                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="form-input"
                                required
                                maxlength={config.MAX_TITLE_BYTES}
                                value={values?.name ?? ""}
                                placeholder="e.g. Version 1.0 — Initial Release"
                            />
                        </div>
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input
                                    type="checkbox"
                                    id="create_tag"
                                    name="create_tag"
                                    value="on"
                                    checked={showTagFields}
                                    data-toggle-target="tag-fields-group"
                                />
                                <span>Create a git tag for this release</span>
                            </label>
                        </div>
                        <div
                            id="tag-fields-group"
                            style={showTagFields ? "" : "display:none"}
                        >
                            <div class="form-group">
                                <label class="form-label" for="tag_name">
                                    Tag name{" "}
                                    <span class="form-required">*</span>
                                </label>
                                <input
                                    type="text"
                                    id="tag_name"
                                    name="tag_name"
                                    class="form-input"
                                    maxlength={config.MAX_TITLE_BYTES}
                                    pattern="[a-zA-Z0-9._\-+]+"
                                    title="Letters, digits, dots, hyphens, underscores, and plus signs only"
                                    value={values?.tag_name ?? ""}
                                    placeholder="v1.0.0"
                                />
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="revision">
                                    Revision{" "}
                                    <span class="form-required">*</span>
                                </label>
                                <input
                                    type="text"
                                    id="revision"
                                    name="revision"
                                    class="form-input monospace"
                                    value={defaultRevision}
                                    placeholder="branch, tag, or commit"
                                />
                                <p class="form-hint">
                                    Branch, tag, or commit to tag.
                                </p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="notes">
                                Release notes
                            </label>
                            <textarea
                                id="notes"
                                name="notes"
                                class="form-input form-textarea"
                                rows="8"
                                maxlength={config.MAX_TEXT_BODY_BYTES}
                            >
                                {values?.notes ?? ""}
                            </textarea>
                        </div>
                        <div class="form-group">
                            <label class="checkbox-label">
                                <input
                                    type="checkbox"
                                    name="include_source_code"
                                    value="on"
                                    checked={
                                        values?.include_source_code ?? false
                                    }
                                />
                                <span>
                                    Include source code archives (zip, tar.gz,
                                    tar.zst)
                                </span>
                            </label>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="files">
                                Attach files
                            </label>
                            <input
                                type="file"
                                id="files"
                                name="files"
                                class="form-input"
                                multiple
                            />
                            <p class="form-hint">
                                You can attach multiple files to this release.
                            </p>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                Create release
                            </button>
                            <a
                                href={`/${repo.name}/releases`}
                                class="btn btn-secondary"
                            >
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </Layout>
    );
}