import {
  Box,
  Button,
  Container,
  Grid,
  GridItem,
  Heading,
  HStack,
  Icon,
  Input,
  InputGroup,
  Link,
  Select,
  Table,
  TableCaption,
  TableContainer,
  Tbody,
  Td,
  Text,
  Th,
  Thead,
  Tr,
  useColorMode,
  useToast,
  VStack,
} from "@chakra-ui/react";
import React, { useContext, useEffect } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
import bannerImage from "../assets/images/bannerImg.png";
import { useNavigate, useParams } from "react-router-dom";

const SubnetId = () => {
  const { colorMode } = useColorMode();
  const params = useParams();
  const navigate = useNavigate();

  const toast = useToast();
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
  }, []);

  const tableData = [
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
    {
      "Subnet Id": "A1B2C3D4E5F6G",
      "Transaction count": 10,
    },
  ];

  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={{ base: "block", md: "flex" }}
        justifyContent={"space-between"}
        mb={10}
      >
        <Heading
          fontSize={"md"}
          fontWeight={400}
          color={colorMode === "light" ? "#000" : "#fff"}
          mb={{ base: "10px", md: "0px" }}
        >
          Subnet Overview {params?.id}
        </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>
      <VStack
        pt={{ base: colorMode === "light" ? 10 : 10, md: 10 }}
        mb={{ base: 8, md: 14 }}
      >
        <Container maxW="2xl" position={"relative"}>
          <Box w={"100%"} display={"flex"} alignItems={"center"}>
            <InputGroup
              width={"100%"}
              boxShadow={"sm"}
              size="sm"
              bg={colorMode === "light" ? "light.100" : "#393939"}
              // border={"none"}
              rounded={"lg"}
            >
              <Input
                roundedLeft={8}
                w={"76%"}
                // border={`1px solid ${
                //   colorMode === "light" ? "#230A79" : "#393939"
                // }`}
                borderColor={colorMode === "light" ? "#CED4DA" : "#565252"}
                h={"42px"}
                type="search"
                placeholder="Search by Subnet ID"
                onChange={(e) => setSearchTerm(e.target.value)}
                _hover={{
                  borderColor: "#7f8c8d",
                }}
                _placeholder={{ color: "#737C82" }}
                _focusVisible={{
                  borderColor: colorMode === "light" ? "#230A79" : "#7f8c8d",
                }}
              />
              <Button
                zIndex={99}
                h={"42px"}
                w={{ base: "205px", md: "24%" }}
                fontWeight={400}
                roundedBottomRight={8}
                roundedTopRight={8}
                fontSize={"sm"}
                rounded={0}
                border="none"
                bg={colorMode === "light" ? "#4023A6" : "#565252"}
                _hover={{
                  opacity: 0.9,
                  bg: colorMode !== "light" && "#333248",
                }}
                _focus={{
                  opacity: 1,
                  outline: "none",
                  bg: colorMode === "light" ? "#4023A6" : "#565252",
                }}
                _active={{
                  opacity: 0.9,
                  outline: "none",
                  bg: colorMode === "light" ? "#4023A6" : "#565252",
                }}
                color={"#fff"}
              >
                Search
              </Button>
            </InputGroup>
          </Box>
        </Container>
      </VStack>
      <Box>
        <Container maxW="6xl">
          <TableContainer roundedTop={5}
             bg={colorMode === "light" ? "#F2EFFF" : "#312F35"}>
            <Table variant="striped" colorScheme="darkPurple">
              <Thead>
                <Tr bg={colorMode === "light" ? "#230A79" : "#312f35"}>
                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Sr. no</Th>
                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Subnet Id</Th>
                  <Th fontWeight={500} color={"#fff"} textTransform={"inherit"}>Transaction count</Th>
                </Tr>
              </Thead>
              <Tbody>
                {tableData.map((row, index) => (
                  <Tr key={index}>
                    <Td w={50} fontSize={"xs"} py={3}>{index + 1}.</Td>
                    <Td fontWeight={500} cursor={"pointer"} w={200} color={colorMode === "light" ? "#230A79" : "#B09AFF"} fontSize={"xs"} py={3} onClick={() =>
                      navigate(`/subnet-id-overview/${row["Subnet Id"]}`)
                    }>{row["Subnet Id"]}
                    </Td>
                    <Td w={100} fontSize={"xs"} py={3}>{row["Transaction count"]}</Td>
                  </Tr>
                ))}
              </Tbody>
            </Table>
          </TableContainer>
          <Pagination />
        </Container>
      </Box>
    </Box>
  );
};

export default SubnetId;
