"use client";

import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";

import { IN_PROGRESS_COLOR } from "../../plenary-data";

import { ChartExportMenuButton } from "./chart-export-menu-button";
import { PlenaryChartCard } from "./plenary-chart-card";
import { PlenaryLegend } from "./plenary-legend";
import { PlenaryStackedBarRow } from "./plenary-stacked-bar-row";

export type StatusStackedRow = {
  label: string;
  solved: number;
  inProgress: number;
  notAddressed: number;
};

type StatusStackedCardProps = {
  title: string;
  rows: StatusStackedRow[];
};

export function StatusStackedCard({
  title,
  rows,
}: StatusStackedCardProps) {
  const theme = useTheme();

  return (
    <PlenaryChartCard
      title={title}
      action={<ChartExportMenuButton />}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: 1,
        }}
      >
        {rows.map((row) => (
          <PlenaryStackedBarRow
            key={row.label}
            label={row.label}
            labelWidth={208}
            rowHeight={17}
            segments={[
              {
                value: row.solved,
                color:
                  theme.palette.success.main,
                label: row.solved,
              },
              {
                value: row.inProgress,
                color: IN_PROGRESS_COLOR,
                label: row.inProgress,
              },
              {
                value: row.notAddressed,
                color:
                  theme.palette.error.main,
                label: row.notAddressed,
              },
            ]}
          />
        ))}
      </Box>

      <PlenaryLegend
        items={[
          {
            label: "Solved",
            color:
              theme.palette.success.main,
          },
          {
            label: "In Progress",
            color: IN_PROGRESS_COLOR,
          },
          {
            label: "Not Addressed",
            color:
              theme.palette.error.main,
          },
        ]}
        justifyContent="flex-start"
        trailingLabel="Status"
      />
    </PlenaryChartCard>
  );
}