import React, { useMemo } from "react";
import { DOCUMENT_STATUS_CHART_ITEMS } from "../../utils/documentStatusStats.js";

/**
 * @param {{
 *   series: Array<{ label: string, value: number, tone?: string }>,
 *   activeStatusId?: number | string,
 *   onSelect?: (statusId: number | "all") => void,
 * }} props
 */
export default function UserSwiStatusFilter({
  series = [],
  activeStatusId = "all",
  onSelect,
}) {
  const total = useMemo(
    () => series.reduce((sum, item) => sum + item.value, 0),
    [series]
  );

  return (
    <div className="swi-user-status-filter" role="tablist" aria-label="Filter by status">
      <button
        type="button"
        role="tab"
        aria-selected={activeStatusId === "all"}
        className={`swi-user-status-filter__btn${activeStatusId === "all" ? " is-active" : ""}`}
        onClick={() => onSelect?.("all")}
      >
        All
        <span className="swi-user-status-filter__count">{total}</span>
      </button>
      {DOCUMENT_STATUS_CHART_ITEMS.map((item) => {
        const row = series.find((s) => s.statusId === item.statusId);
        const value = row?.value ?? 0;
        const active = Number(activeStatusId) === item.statusId;
        return (
          <button
            key={item.statusId}
            type="button"
            role="tab"
            aria-selected={active}
            className={`swi-user-status-filter__btn swi-user-status-filter__btn--${item.tone}${active ? " is-active" : ""}`}
            onClick={() => onSelect?.(item.statusId)}
          >
            {item.label}
            <span className="swi-user-status-filter__count">{value}</span>
          </button>
        );
      })}
    </div>
  );
}
