import { useState } from "react";
import { updateIssue } from "~/fns/issues";
import { useAction } from "~/hooks/use-action";
import { Badge, RelativeTime } from "./ui/Primitives";
import { Button } from "./ui/Button";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";

type Props = {
  owner: string;
  repo: string;
  number: number;
  title: string;
  state: "open" | "closed";
  merged?: boolean;
  draft?: boolean;
  author: string;
  createdAt: number;
  canEdit: boolean;
  subtitle?: React.ReactNode;
};

export function IssueHeader({
  owner,
  repo,
  number,
  title,
  state,
  merged = false,
  draft = false,
  author,
  createdAt,
  canEdit,
  subtitle,
}: Props) {
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(title);
  const save = useAction(updateIssue);
  const tone = merged ? "purple" : state === "open" ? (draft ? "neutral" : "green") : "red";
  const label = merged ? "Merged" : draft && state === "open" ? "Draft" : state === "open" ? "Open" : "Closed";

  return (
    <header className="space-y-2 border-b border-gray-800 pb-4">
      {editing ? (
        <div className="flex gap-2">
          <label htmlFor="issue-title" className="sr-only">
            Title
          </label>
          <input
            id="issue-title"
            value={value}
            onChange={(event) => setValue(event.target.value)}
            className={cn(inputClass, "h-9 text-lg")}
          />
          <Button
            variant="primary"
            pending={save.pending}
            onClick={async () => {
              if (await save.run({ data: { owner, repo, number, title: value } })) setEditing(false);
            }}
          >
            Save
          </Button>
          <Button variant="ghost" onClick={() => setEditing(false)}>
            Cancel
          </Button>
        </div>
      ) : (
        <div className="flex items-start gap-3">
          <h1 className="text-2xl font-semibold text-white">
            {title} <span className="font-normal text-gray-500">#{number}</span>
          </h1>
          {canEdit && (
            <Button size="sm" variant="ghost" className="ml-auto" onClick={() => setEditing(true)}>
              Edit
            </Button>
          )}
        </div>
      )}
      <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500">
        <Badge tone={tone}>{label}</Badge>
        <span className="font-medium text-gray-300">{author}</span>
        {subtitle ?? (
          <span>
            opened this <RelativeTime timestamp={createdAt} />
          </span>
        )}
      </div>
    </header>
  );
}