import React from "react";

import { Stack, Typography } from "@mui/material";

import WidgetCard from "../../../components/WidgetCard";
import { useI18n } from "../../../contexts/I18nContext";
import { ContribComponent } from "../../../types";
import { capitalize } from "../../../util";
import { SubscriptionTotalCountItem } from "../types/stats";

const SubscriptionStateCountWidget: ContribComponent<SubscriptionTotalCountItem[]> = ({
  data,
  sx,
}) => {
  const { t } = useI18n();

  if (data.length === 0) return null;

  return (
    <WidgetCard
      gridColumn={{ lg: "span 3", md: "span 6", sm: "span 1" }}
      gridRow="span 1"
      // order={{ md: 50 }}
      sx={sx}
      title={t("Total Subscription Count")}
    >
      <Stack direction={"column"} px={2}>
        {data
          .filter(({ state }) => ["PENDING", "RUNNING"].includes(state))
          .map((item) => (
            <Stack
              key={item.state}
              alignItems={"center"}
              direction={"row"}
              justifyContent={"space-between"}
              spacing={1}
            >
              <Typography>{capitalize(item.state)}</Typography>
              <Typography fontSize={28} fontWeight={700}>
                {item.count}
              </Typography>
            </Stack>
          ))}
      </Stack>
    </WidgetCard>
  );
};

export default SubscriptionStateCountWidget;