import type { MouseEvent } from "react";
import type { AgileIssue } from "../api/types.ts";
import { IssueLink, useOpenIssue } from "../issues/IssueLink.tsx";
import { fmtSp } from "./model.ts";
import { TypeIcon } from "./TypeIcon.tsx";

// карточка задачи в колонке доски; щелчок (не по ссылке и не при выделении текста) открывает карточку задачи поверх страницы
export function AgileCard({ issue }: { issue: AgileIssue }) {
  const open = useOpenIssue();
  const click = (e: MouseEvent) => {
    if ((e.target as HTMLElement).closest("a")) return;
    const sel = window.getSelection();
    if (sel && !sel.isCollapsed && sel.containsNode(e.currentTarget, true)) return;
    open(issue.key);
  };
  return (
    <li className={"agile-card" + (issue.done ? " is-done" : "")} onClick={click}>
      <span className="agile-card__summary">{issue.summary ?? "—"}</span>
      <span className="agile-card__foot">
        <TypeIcon type={issue.issue_type} />
        <IssueLink issueKey={issue.key} className="agile-row__key" />
        <span className="agile-card__assignee">{issue.assignee ?? "—"}</span>
        <span className="agile-row__sp">{fmtSp(issue.story_points)}</span>
      </span>
    </li>
  );
}