import {
    Box,
    Container,
    Divider,
    Heading,
    HStack,
    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";
  
  const TransactionDetails = () => {
    const navigate = useNavigate()
    const params = useParams()
    const { colorMode } = useColorMode();
  console.log(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)
   console.log(filteredData);
    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 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 color={colorMode === "light" ? "gray.400" : "gray.100"}>
                      <Text> {filteredData?.description} </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} />
                  <Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
                      Token Information
                  </Text>
                  <HStack fontSize={"sm"} gap={4} mb={2}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Token ID :</Text>
                    <HStack
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      textDecoration={"underline"}
                    >
                      <Text>
                          {filteredData?.sender}</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>
                  <HStack fontSize={"sm"} gap={4} mb={3}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                      Block ID :
                    </Text>
                    <Text
                      display={"flex"}
                      alignItems={"center"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      textDecoration={"underline"}
                    >
                      <Text>
                      {filteredData?.receiver}
                      </Text>
                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
                      <MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
                      </Text>
                    </Text>
                  </HStack>
              </Box>
              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Main net / Subnet Id</Text>
                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Text  style={{ fontWeight: "inherit" }}> {filteredData?.sender} </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>
                  <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/${filteredData.sender}`)} style={{ fontWeight: "inherit" }}> {filteredData?.sender} </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>
                  <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/${filteredData.receiver}`)} style={{ fontWeight: "inherit" }}> {filteredData?.receiver}</Text>
                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
                      </Text>
                  </HStack>
              </Box>
              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                  <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
                      <Box>
                          <Text>Amount</Text>
                          <Text color={"#A1A1A1"}>$ 100</Text>
                      </Box>
                      <Box>
                          <Text>Timestamp</Text>
                          <Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
                      </Box>
                  </HStack>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Text  style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</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>
              </Box>
              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Text  style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</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>
              </Box>
            </Container>
          </Box>
          <RelatedTransactions />
      </>
    );
  };
  
  export default TransactionDetails;
  