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

const MainNet = () => {

  const { overview } = useContext(GlobalStateContext);
  const { colorMode} = useColorMode();
  const navigate = useNavigate()

  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 p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
      <Container
        maxW="6xl"
        color="white"
        display={"flex"}
        justifyContent={"space-between"}
        mb={10}
      >
        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
           Main Net - Overview
        </Heading>
        <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
          View total number of records
          <Select width={"70px"} rounded="md" size="xs">
            <option value='option1'>10</option>
            <option value='option2'>20</option>
            <option value='option3'>30</option>
          </Select>
        </Text>
      </Container>
      <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;"}>
            {overview.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 display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                    <Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
                    
                  <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={"sm"} gap={4} mb={2}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Text cursor={"pointer"} 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 cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
                    <HStack  color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
                      <Text 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
                    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"} position={"relative"}>
                    <MdOutlineErrorOutline
                      fontSize={"18px"}
                      style={{ marginTop: "1px",position:"absolute",top:"2px",left:"-24px" }}
                      color="#7B7B7B"
                    />
                    <VStack>
                      <HStack w={'100%'} justifyContent={'flex-start'}>
                        <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 w={'100%'} justifyContent={'flex-start'}>
                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text>
                        <Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                         {transaction.subnetID}
                        </Text>
                      </HStack>
                      
                    </VStack>
                  </HStack>
                </Box>
              </GridItem>
            </Grid>
            ))}
          </Box>
          <Pagination />
        </Container>
      </Box>
    </Box>
  );
};

export default MainNet;
