import { JIRA_URL } from "../constants.ts";
import type { ProblemItem, Problems } from "../types.ts";

export const problemCount = (p: Problems) => p.dates.length + p.unassigned.length + p.late.length;

const K = ({ k }: { k: string }) => <a className="k" href={`${JIRA_URL}/browse/${k}`} target="_blank" rel="noopener">{k}</a>;
function Section({ title, list }: { title: string; list: ProblemItem[] }) {
  if (!list.length) return null;
  return (
    <>
      <h4>{title} ({list.length})</h4>
      <ul>{list.map((x, i) => <li key={i}><K k={x.a.key} /> → <K k={x.b.key} /> <span className="why">— {x.text}</span></li>)}</ul>
    </>
  );
}

export function ProblemsDrawer({ problems, onClose }: { problems: Problems; onClose(): void }) {
  return (
    <aside className="drawer">
      <div className="drawer-head"><b>Проблемы на доске</b><button type="button" className="btn sm" onClick={onClose}>Закрыть</button></div>
      <div>
        {!problemCount(problems) && <div className="ok">По датам, исполнителям и статусам блокеров на видимой части доски проблем нет.</div>}
        <Section title="Срок блокера не раньше срока зависимой задачи" list={problems.dates} />
        <Section title="Блокер без исполнителя" list={problems.unassigned} />
        <Section title="Блокер не начат, а срок зависимой задачи близко" list={problems.late} />
        <Section title="Передачи между исполнителями (точки ожидания)" list={problems.hand} />
      </div>
    </aside>
  );
}