import React from "react";
import { useQuery } from "react-query";
import axios from "axios";

import {
  AspectRatio,
  Box,
  Flex,
  Heading,
  HStack,
  Icon,
  SimpleGrid,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
  Tooltip,
} from "@chakra-ui/react";
import { FaUserCircle, FaArrowAltCircleRight } from "react-icons/fa";
import { Link } from "react-router-dom";
import { AutoSizer, WindowScroller, List } from "react-virtualized";
import prettifyStatisticName from "./PrettifyStatisticName";
import StackedBar from "./StackedBar";

const AggregatesShowcase = () => {
  const aggregates = useQuery(
    `aggregates`,
    async () => {
      const { data } = await axios.get(`http://localhost:7000/api/aggregates`);
      return data;
    },
    {
      placeholderData: [],
    }
  );

  const killedAggregates = aggregates.data
    .filter((x) => x.type === "minecraft:killed")
    .sort((a, b) => b.value - a.value);
  const killedTotal = killedAggregates.reduce((acc, val) => acc + val.value, 0);

  const killedByAggregates = aggregates.data
    .filter((x) => x.type === "minecraft:killed_by")
    .sort((a, b) => b.value - a.value);
  const killedByTotal = killedByAggregates.reduce(
    (acc, val) => acc + val.value,
    0
  );

  const travelAggregates = aggregates.data
    .filter((x) => x.type === "minecraft:custom" && x.name.endsWith("one_cm"))
    .sort((a, b) => b.value - a.value);
  const travelTotal = travelAggregates.reduce((acc, val) => acc + val.value, 0);

  return aggregates.isFetched ? (
    <>
      <StackedBar heading="Mobs Killed" aggregates={killedAggregates} />

      <StackedBar heading="Causes of Death" aggregates={killedByAggregates} />

      <StackedBar heading="Preferred Travel" aggregates={travelAggregates} />

      <SimpleGrid columns={2} mt={4} spacingY={4} spacingX={8}>
        {aggregates.data
          .filter(
            (x) =>
              x.type !== "minecraft:killed" &&
              x.type !== "minecraft:killed_by" &&
              !x.name.endsWith("one_cm")
          )
          .map((x, i) => {
            var value = x.value;
            if (x.name === "minecraft:play_one_minute") {
              value = x.value / 20 / 60;
            }

            return (
              <Stat key={i}>
                <StatLabel>{prettifyStatisticName(x.type, x.name)}</StatLabel>
                <StatNumber>{`${x.value
                  .toString()
                  .replace(
                    /\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g,
                    ","
                  )}`}</StatNumber>
              </Stat>
            );
          })}
      </SimpleGrid>
    </>
  ) : (
    <></>
  );
};

export default AggregatesShowcase;