import {
  Box,
  Container,
  Grid,
  GridItem,
  HStack,
  Icon,
  Text,
  VStack,
  useColorMode,
  useToast,
} from "@chakra-ui/react";
import React, { useContext } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link, useNavigate } from "react-router-dom";
import ToastBox from "../ToastBox";

const LatestTransactions = () => {
  const toast = useToast();
  const navigate = useNavigate();

  const { colorMode } = useColorMode();
  const { transactions } = useContext(GlobalStateContext);

  function copyToClipboard(text) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        toast({
          render: () => (
            <ToastBox status={"warn"} message={"Text copied to clipboard"} />
          ),
        });
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err);
      });
  }
  return (
    <Box>
      <Container maxW="6xl">
        <Grid
          templateColumns={{ base: "100% 0%", md: "90% 10%" }}
          gap={0}
          bg={colorMode === "light" ? "#230A79" : "#232127"}
          // bg={"#232127"}
          roundedTop={"lg"}
        >
          <GridItem display={{ base: "none", md: "grid" }} p={2}>
            <Text color={"#fff"}>Sr. no</Text>
          </GridItem>
          <GridItem p={2}>
            <Text color={"#fff"}>Transactions</Text>
          </GridItem>
        </Grid>
        <Box
          roundedBottom={"lg"}
          overflow={"hidden"}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
        >
          {transactions.map((transaction, index) => (
            <Grid
              bg={
                index % 2 === 0
                  ? colorMode === "light"
                    ? "#F2EFFF"
                    : "#312F35"
                  : colorMode === "light"
                  ? "#fff"
                  : "#232127"
              }
              key={transaction.id}
              templateColumns={{ base: "100% 0%", md: "10% 90%" }}
              gap={0}
            >
              <GridItem
                display={{ base: "none", md: "grid" }}
                p={4}
                color={colorMode === "light" ? "#000" : "#fff"}
              >
                {index + 1}.
              </GridItem>
              <GridItem  p={4}>
                {/* <Box> */}
                <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
                  display={"flex"}
                  fontSize={{base:"xs", md:"sm" }}
                  mb={2}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                >
                  <Text
                    maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens
                    // overflow={'hidden'} // Ensure overflow is hidden
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated 
                    cursor={"pointer"}
                    onClick={() =>
                      navigate(`/transaction/${transaction?.description}`)
                    }
                  >
                    {transaction.description}
                  </Text>

                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(transaction.description)}
                    />
                  </Text>
                </Text>

                <HStack fontSize={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Sender:
                  </Text>


                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    w={'84%'}
                    justifyContent={'space-between'}
                    fontSize={{base:"xs", md:"sm" }}
                  >
                    <Text
                      cursor={"pointer"} 
                      maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
                      // overflow={'hidden'} // Ensure overflow is hidden
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() =>
                        navigate(`/did-info/${transaction.sender}`)
                      }
                    >
                      {transaction.sender}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(transaction.sender)}
                      />
                    </Text>
                  </HStack> 
                </HStack>
                <HStack fontSize={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
                  <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Receiver:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{base:"xs", md:"sm" }}
                  >
                    <Text
                      cursor={"pointer"} 
                      maxW={{base:"55%",md:"100%"}}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() =>
                        navigate(`/did-info/${transaction.receiver}`)
                      }
                    >
                      {transaction.receiver}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(transaction.receiver)}
                      />
                    </Text>
                  </HStack>
                </HStack>
                <HStack
                  flexDirection={{ base: "column", md: "row" }}
                  justifyContent={{ base: "", md: "space-between" }}
                  alignItems={{ base: "flex-start", md: "" }}
                  // flexWrap={'wrap'}

                  // w={"80%"}
                  w={{ base: "100%", md: "80%" }}
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={3}
                >
                  <Box>
                    <Text
                      mb={2}
                      // fontSize={{base:"xs", md:"sm" }}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Smart contract ID :
                    </Text>
                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Link to="/smart-contract">{transaction.contract}</Link>
                    </Text>
                  </Box>
                  <Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Date and Time Stamp :
                    </Text>
                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      {transaction.date}
                    </Text>
                  </Box>
                  <Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Amount:
                    </Text>
                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      {transaction.amount}
                    </Text>
                  </Box>
                </HStack>

                <HStack
                  fontSize={"sm"}
                  alignItems={"flex-start"}
                  position={"relative"}
                >
                  <Icon
                    as={MdOutlineErrorOutline}
                    fontSize={"18px"}
                    display={{ base: "none", md: "block" }}
                    style={{
                      marginTop: "1px",
                      position: "absolute",
                      top: "2px",
                      left: "-24px",
                    }}
                    color="#7B7B7B"
                  />

                  <VStack fontSize={{base:"xs", md:"sm" }}>
                    <HStack  w={"100%"} justifyContent={"flex-start"}>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        Transaction type :
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        <Text>{transaction.transactionType}</Text>
                      </Text>
                    </HStack>

                    <HStack>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        Subnet ID/Main net :
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        <Link
                          to={`/subnet-id-overview/${transaction.subnetID}`}
                          style={{ fontWeight: "inherit" }}
                        >
                          {transaction.subnetID}
                        </Link>
                      </Text>
                    </HStack>
                  </VStack>
                </HStack>
                {/* </Box> */}
              </GridItem>
            </Grid>
          ))}
        </Box>
        <Pagination />
      </Container>
    </Box>
  );
};

export default LatestTransactions;