import {
  Box,
  Container,
  Divider,
  Heading,
  HStack,
  Image,
  Text,
  useColorMode,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { MdContentCopy } from "react-icons/md";
import { Link, useNavigate, useParams } from "react-router-dom";
import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions";
import bannerImage from "../../assets/images/bannerImg.png";
import ToastBox from "../../components/ToastBox";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import TransactionTable from "./TransactionTable";
import { useGetTransByIdQuery } from "../../Services/api.service";
// import rbtLogoOutline from "../../src/assets/images/rubix-filled.svg";
import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
import { formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
import NormalTable from "../../components/DataTable/NormalTable";

const TransactionDetails = () => {
  const navigate = useNavigate();
  const params = useParams();
  const { colorMode } = useColorMode();
  const { data, isLoading, refetch, errors } = useGetTransByIdQuery(params?.id);
  // Scroll to top when component mounts or params change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
  }, [params]);
  const { transactions } = useContext(GlobalStateContext);
  const filteredData = transactions?.find(
    (item) => item?.description === params?.id
  );
  const toast = useToast();
  function copyToClipboard(text) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        // console.log('Text copied to clipboard');
        // alert('Text copied to clipboard');
        toast({
          render: () => (
            <ToastBox status={"warn"} message={"Text copied to clipboard"} />
          ),
        });
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err);
      });
  }
  

  const [ dataArray, setDataArray ] = useState(null)
  
  useEffect(() => {
    if (data?.data?.pledgeInfo?.pledgeDetails) {
      const dataArrayOfObject = Object?.entries(data?.data?.pledgeInfo?.pledgeDetails)?.map(([id, linkedIds]) => ({ id, linkedIds }));
      setDataArray(dataArrayOfObject)
    }
  }, [data])

  console.log(dataArray);
  





  // ===============================[ Table Header ]
  const tableHeadRow = [
    // "Sr. no",
    "Quorum List",
  ];

  // const extractedArray = reportsHistory.map((item)=>({ }))
  const extractedArray = data?.data?.quorumList?.map((item, index) => ({
    "Sr. no": (
      <Text w={18} as={"span"} display={"flex"} gap={2} alignItems={"center"}>
        {index + 1}
      </Text>
    ),
    "Quorum List": (
      <Box
        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
        onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
      >
        {item}
      </Box>
    ),
  }));

  return (
    <>
      <Box
        backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
        backgroundSize="cover"
        backgroundRepeat="no-repeat"
        pb={"5rem"}
      >
        <Container maxW="6xl" pt={"6rem"}>
          <Heading
            mb={5}
            fontSize={"sm"}
            fontWeight={400}
            color={colorMode === "light" ? "#000" : "#fff"}
          >
            Transaction Info
          </Heading>
          <Box
            boxShadow={colorMode === "light" && "md"}
            bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
            p={4}
            mb={5}
            rounded={6}
          >
            <Text color={"#969696"} fontSize={"sm"}>
              Transaction ID
            </Text>
            <HStack fontSize={"sm"}>
              <HStack
                isTruncated
                color={colorMode === "light" ? "gray.400" : "gray.100"}
              >
                <Text
                  whiteSpace={"nowrap"} // Prevent the text from wrapping
                  textOverflow={"ellipsis"}
                  isTruncated
                  overflow={"hidden"}
                  cursor={"pointer"}
                >
                  {data?.data?.transactionId}
                </Text>
                <Text
                  _hover={{ bg: "gray.50" }}
                  transition={"0.5s"}
                  rounded={"sm"}
                  p={1}
                  as={"span"}
                  ml={1}
                  cursor={"pointer"}
                >
                  <MdContentCopy
                    onClick={() => copyToClipboard(filteredData.sender)}
                  />
                </Text>
              </HStack>
            </HStack>
            <Divider mt={4} mb={5} />
            {data?.data["tokenList"] && data?.data?.blockHash && (
              <Text
                fontSize={"md"}
                mb={2}
                color={colorMode === "light" ? "#230A79" : "#fff"}
              >
                Token Information
              </Text>
            )}
            {data?.data?.tokenList && (
              <Box
                fontSize={"sm"}
                gap={4}
                mb={2}
                display={{ base: "block", md: "flex" }}
              >
                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                  Token ID :
                </Text>
                <HStack
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                  textDecoration={"underline"}
                >
                  <Text
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                  >
                    {data?.data?.tokenList["0"].tokenId}
                  </Text>
                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() =>
                        copyToClipboard(data?.data?.tokenList["0"].tokenId)
                      }
                    />
                  </Text>
                </HStack>
              </Box>
            )}
            {data?.data?.blockHash && (
              <Box
                fontSize={"sm"}
                gap={4}
                mb={2}
                display={{ base: "block", md: "flex" }}
              >
                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                  Block ID :
                </Text>
                <Text
                  display={"flex"}
                  alignItems={"center"}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                  textDecoration={"underline"}
                >
                  <Text
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                  >
                    {data?.data?.blockHash}
                  </Text>
                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(data?.data?.blockHash)}
                    />
                  </Text>
                </Text>
              </Box>
            )}
          </Box>

          <Box
            boxShadow={colorMode === "light" && "md"}
            bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
            p={4}
            mb={extractedArray && 5}
            rounded={6}
          >
            {data?.data?.netWorkType && (
              <>
                <Text
                  color={colorMode === "light" ? "#000" : "#fff"}
                  fontSize={"sm"}
                >
                  {data?.data?.netWorkType}
                </Text>
                <HStack
                  fontSize={"sm"}
                  pb={3}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                >
                  <Text
                    fontWeight={"inherit"}
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                  >
                    {data?.data?.subNetworkId}
                  </Text>
                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(data?.data?.netWorkType)}
                    />
                  </Text>
                </HStack>
              </>
            )}
            {data?.data?.sender && (
              <>
                <Text
                  color={colorMode === "light" ? "#000" : "#fff"}
                  fontSize={"sm"}
                >
                  Sender
                </Text>
                <HStack
                  fontSize={"sm"}
                  pb={3}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                >
                  <Text
                    onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
                    fontWeight={"inherit"}
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                  >
                    {data?.data?.sender}
                  </Text>
                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(data?.data?.receiver)}
                    />
                  </Text>
                </HStack>
              </>
            )}
            {data?.data?.receiver && (
              <>
                <Text
                  color={colorMode === "light" ? "#000" : "#fff"}
                  fontSize={"sm"}
                >
                  Receiver
                </Text>
                <HStack
                  fontSize={"sm"}
                  pb={3}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                >
                  <Text
                    onClick={() =>
                      navigate(`/did-info/${data?.data?.receiver}`)
                    }
                    fontWeight={"inherit"}
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                  >
                    {data?.data?.receiver}
                  </Text>
                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(data?.data?.receiver)}
                    />
                  </Text>
                </HStack>
              </>
            )}
          </Box>
          <Box
            boxShadow={colorMode === "light" && "md"}
            bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
            p={4}
            mb={5}
            rounded={6}
          >
            <HStack fontSize={"sm"} gap={{ base: "4rem", md: "8rem" }} mb={2}>
              {data?.data?.amount && (
                <Box>
                  <Text>Amount</Text>
                  <Text
                    display={"flex"}
                    gap={2}
                    alignItems={"center"}
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                  >
                    <Image w={4} src={rbtLogoOutline} />
                    {data?.data?.amount}
                  </Text>
                </Box>
              )}
              {data?.data?.timestamp && (
                <Box>
                  <Text>Timestamp</Text>
                  <Text color={"#A1A1A1"}>
                    {formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}
                  </Text>
                </Box>
              )}
            </HStack>
          </Box>

          {extractedArray && (
            <NormalTable
              tableHeadRow={tableHeadRow}
              data={extractedArray}
              isLoading={isLoading}
            />
          )}

         {dataArray&& <TransactionTable data={dataArray} />}
        </Container>
      </Box>
      <RelatedTransactions />
    </>
  );
};

export default TransactionDetails;
