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, useParams } from "react-router-dom";
  import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
  import bannerImage from "../assets/images/bannerImg.png";
import ToastBox from "../components/ToastBox";
  
  const DidInfo = () => {
    useEffect(() => {
      window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
    }, [params]);
    const { colorMode } = useColorMode();
    const params = useParams()

    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 h={"100vh"}display={'flex'} justifyContent={'space-between'} flexDirection={'column'}>
          <Box  backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
           backgroundRepeat="no-repeat" pb={"8rem"}>
           <Container  maxW="6xl" pt={"6rem"}>
                <Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
                DID Info
              </Heading>
              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                  <Text color={"#969696"} fontSize={"sm"}>DID</Text>
                  <HStack fontSize={"sm"}>
                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      <Link  style={{ fontWeight: "inherit" }}> {params?.id}</Link>   
                      <Text as={"span"} ml={5} cursor={"pointer"}>
                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                      </Text>
                    </HStack>
                  </HStack>
                  <Divider mt={4} mb={5} />
                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Balance</Text>
                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Link  style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
                    <Text as={"span"} ml={5} cursor={"pointer"}>
                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                    </Text>
                  </HStack>
              </Box>
            </Container>
          </Box>
          <RelatedTransactions />
      </Box>
    );
  };
  
  export default DidInfo;