import { Box, Container, Grid, GridItem, HStack, Text, 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 } from "react-router-dom";
import ToastBox from "../ToastBox";



const LatestTransactions = () => {

  const { colorMode} = useColorMode();
   const { transactions } = useContext(GlobalStateContext);
   
  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);
      });
  }
  

  return (
    <Box>
      <Container maxW="6xl">
        <Grid
          templateColumns="10% 90%"
          gap={0}
          bg={colorMode === "light" ? "#230A79" : "#232127"}
          // bg={"#232127"}
          borderTopRightRadius={4}
          borderTopLeftRadius={4}
        >
          <GridItem p={2}>
            <Text color={"#fff"}>Sr. no</Text>
          </GridItem>
          <GridItem p={2}>
            <Text color={"#fff"}>Transactions</Text>
          </GridItem>
        </Grid>
        <Box 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="10% 90%"
              gap={0}
            >
              <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
              <GridItem p={4}>
                <Box>
                  <Text fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Link to="/did-info"> {transaction.description}</Link>
                  </Text>
                  <HStack fontSize={"sm"} gap={4} mb={2}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
                    </HStack>
                  </HStack>
                  <HStack fontSize={"sm"} gap={4} mb={3}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
                    </HStack>
                  </HStack>
                  <HStack
                    display={"flex"}
                    justifyContent={"space-between"}
                    w={"80%"}
                    fontSize={"sm"}
                    mb={3}
                  >
                    <Box>
                      <Text mb={2} color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>
                        Smart contract ID dd :
                      </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"}>
                    <MdOutlineErrorOutline
                      fontSize={"20px"}
                      style={{ paddingTop: "4px" }}
                    />
                    <Box>
                      <HStack>
                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                        <Link style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
                        </Text>
                      </HStack>
                      <HStack>
                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                         <Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
                        </Text>
                      </HStack>
                    </Box>
                  </HStack>
                </Box>
              </GridItem>
            </Grid>
          ))}
        </Box>
        <Pagination />
      </Container>
    </Box>
  );
};

export default LatestTransactions;