import {
    Box,
    Container,
    Divider,
    Heading,
    HStack,
    Text,
    useColorMode,
    useToast,
  } from "@chakra-ui/react";
  import React, { useEffect } from "react";
  import { MdContentCopy} from "react-icons/md";
  import { Link, useNavigate } from "react-router-dom";
  import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
  import bannerImage from "../assets/images/bannerImg.png";
import ToastBox from "../components/ToastBox";
import TransactionTable from "./Transaction/TransactionTable";
  
  const Transaction = () => {
    const { colorMode } = useColorMode();
    const navigate = useNavigate()
    useEffect(() => {
        window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
      }, []);

    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 minH={"100vh"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
           backgroundRepeat="no-repeat" pb={"5rem"}>
           <Container maxW="6xl" pt={"6rem"}>
              <Text mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
               Smart Contract Info
              </Text>
              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                  <Text color={"#969696"} fontSize={"sm"}>Smart Contract Token</Text>
                  <HStack fontSize={"sm"}>
                  <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      cursor={"pointer"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Text isTruncated>
                      <Link  style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577</Link>
                    </Text>
                  </HStack>
                  </HStack>
                  <Divider mt={4} mb={5} />
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Transaction ID</Text>
                  <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                    fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Text isTruncated><Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link></Text>
                      <Text as={"span"} ml={5} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                  </HStack>
                  <Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
                     Block
                  </Text>
                  <Box fontSize={"sm"} gap={4} mb={2} display={{ base: "block", md: "flex" }}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                        Block ID:
                    </Text>
                    <HStack
                        cursor={"pointer"}
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                        textDecoration={"underline"}
                    >
                      <Text  
                        whiteSpace={"nowrap"} // Prevent the text from wrapping
                        textOverflow={"ellipsis"}
                        isTruncated>
                        <Link style={{ fontWeight: "inherit" }}>
                            abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz
                        </Link></Text>
                        <Text as={"span"} ml={5} cursor={"pointer"}>
                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                    </HStack>
                  </Box>
                  <Box fontSize={"sm"} gap={4} mb={3}   display={{ base: "block", md: "flex" }}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                       Block Hash:
                    </Text>
                    <Text
                        display={"flex"}
                        alignItems={"center"}
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                        textDecoration={"underline"}
                        cursor={"pointer"}
                    >
                       <Text
                        whiteSpace={"nowrap"} // Prevent the text from wrapping
                        textOverflow={"ellipsis"}
                        isTruncated>
                        <Link style={{ fontWeight: "inherit" }}>
                            abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!
                        </Link></Text> 
                        <Text as={"span"} ml={5} cursor={"pointer"}>
                        <MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
                        </Text>
                    </Text>
                  </Box>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
                  <HStack  
                    cursor={"pointer"} 
                    fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Text 
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated><Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
                      </Text>
                    <Text  as={"span"} ml={5} cursor={"pointer"} >
                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                    </Text>
                  </HStack>
              </Box>
              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Executor</Text>
                  <HStack 
                     fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                     <Text 
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated><Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
                      </Text>
                      <Text as={"span"} ml={5} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                  </HStack>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Deployer</Text>
                  <HStack 
                   cursor={"pointer"}
                   fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Text 
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated>
                      <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz</Link>
                    </Text>
                      <Text as={"span"} ml={5} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                  </HStack>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Creator</Text>
                  <HStack
                    cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Text 
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated>
                        <Link  style={{ fontWeight: "inherit" }} onClick={()=> navigate(`/did-info/abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz`)}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
                      </Text> 
                      <Text  as={"span"} ml={5} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                  </HStack>
              </Box>
              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={0} rounded={6}>
                  <HStack fontSize={"sm"} gap={{base:"3rem",md:"8rem"}} mb={5}>
                      <Box>
                          <Text>Pledge amount</Text>
                          <Text color={"#A1A1A1"}>$ 100</Text>
                      </Box>
                      <Box>
                          <Text>Timestamp</Text>
                          <Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
                      </Box>
                  </HStack>
              </Box>
              <TransactionTable />
            </Container>
          </Box>
          <RelatedTransactions />
      </>
    );
  };
  
  export default Transaction;
  