import React, { useMemo } from "react";
import { userSwiStatusSeries } from "../../../utils/userSwiStats.js";
import UserVerticalBarChart from "./UserVerticalBarChart.jsx";

/**
 * @param {{
 *   assignments?: object[],
 *   userName?: string,
 *   loading?: boolean,
 *   onClick?: () => void,
 *   onBarClick?: (item: { label: string, value: number, tone?: string, statusId?: number }, index: number) => void,
 * }} props
 */
export default function UserSwiStatusChart({
  assignments = [],
  userName = "You",
  loading = false,
  onClick,
  onBarClick,
}) {
  const series = useMemo(
    () =>
      userSwiStatusSeries(assignments).map((item) => ({
        label: item.label,
        value: item.value,
        tone: item.tone,
        statusId: item.statusId,
      })),
    [assignments]
  );

  if (loading) {
    return (
      <section className="swi-user-chart swi-panel">
        <p className="swi-muted">Loading your SWI chart…</p>
      </section>
    );
  }

  return (
    <UserVerticalBarChart
      data={series}
      title="Your SWIs by status"
      description={`Individual SWI breakdown for ${userName}.`}
      emptyMessage="No SWIs assigned to you yet."
      personalizedWidgetId="swiUserStatusChart"
      onClick={onClick}
      onBarClick={onBarClick}
    />
  );
}
