import { Box, Text, useColorMode } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../components/DataTable/NormalTable";

const TransactionTable = ({data}) => {
  const { subnetId } = useContext(GlobalStateContext);
  const [isLoading, setIsLoading] = useState(false);
  const { colorMode } = useColorMode();
  const navigate = useNavigate();

  useEffect(() => {
    setIsLoading(true);
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 500);
    return () => clearTimeout(timer);
  }, []);

  console.log(data);

  // ===============================[ Table Header ]
  const tableHeadRow = [
    // "Sr. no", 
    "Quorum DID", 
    "Pledge Token(s)"];

  // const extractedArray = reportsHistory.map((item)=>({ }))
  const extractedArray = data?.map((item, index) => ({
    "Sr. no": (
      <Text w={57} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
        {index + 1}
      </Text>
    ),
    "Quorum DID": (
      <Box
        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
        onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
      >
        {item?.id}
      </Box>
    ),
    "Pledge Token(s)": item?.linkedIds?.map((trans, index) => (
      <Box mb={1} key={index} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
        {trans}
      </Box>
    )),
  }));
  return (
    <Box pt={5}>
      <NormalTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={isLoading}
      />
    </Box>
  );
};

export default TransactionTable;
