import {
  border,
  Box,
  Button,
  Container,
  FormControl,
  Heading,
  Input,
  InputGroup,
  InputLeftElement,
  useColorMode,
  VStack,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { IoSearch } from "react-icons/io5";
import LineChart from "../components/Doughnut/LineChart";
import AmountCard from "../components/AmountCard/AmountCard";
import SwitchCharts from "../components/SwitchBtn/SwitchCharts";
import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
import { Link, useNavigate } from "react-router-dom";
import Pagination from "../components/Pagination";
import bannerImage from "../assets/images/bannerImg.png";
import { BiSearchAlt } from "react-icons/bi";

const Home = () => {
  const [isSwitchOn, setIsSwitchOn] = useState(true);
  const { colorMode, toggleColorMode } = useColorMode();
  const [ searchTerm, setSearchTerm] = useState("")
  const navigate = useNavigate()

  return (
    <Box 
      bg={colorMode === "light" ? "#fff" : "none"}
      backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
      backgroundSize="contain"
      backgroundRepeat="no-repeat">
      <Box>
        <VStack pt={{base:20,md:28}} mb={14}>
          <Container maxW="3xl" 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 Transaction hash, token hash , DID or smart contract"
                  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}
                  right={"0"}
                  top={"0"}
                  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'}
                >
                  Generate short url
                </Button>

                <Box
                  position={"inherit"}
                  right={"0"}
                  h={"42px"}
                  w={{base :'64px',md :'6%'}}
                  roundedRight={7}
                  display={"flex"}
                  justifyContent={"center"}
                  alignItems={"center"}
                  bg={colorMode === "light" ? "#DEDBEB" : "#393939"}
                  color={colorMode === "light" ? "#230A79" : "#fff"}
                  cursor={'pointer'}
                  onClick={()=>navigate(`/transaction/${searchTerm}`)}
                  border={`1px solid ${
                    colorMode === "light" ? "#230A79" : "#565252"
                  }`}
                >
                {/* <IoSearch fontSize={"20px"} /> */}
                <BiSearchAlt fontSize={"20px"} />
                </Box>
                
              </InputGroup>
            </Box>
          </Container>
        </VStack>
        <AmountCard />
        <Container maxW="6xl" p={"4rem 1rem"}>
          <Box
            p={5}
            rounded={10}
            bg={colorMode === "light" ? "#DEDBEB47" : "#232127"}
          >
            <LineChart />
          </Box>
        </Container>
      </Box>
      <Box pb={"3rem"} pt={colorMode!=="light" &&10} bg={colorMode === "light" ? "light.100" : "#101015"}>
        <Container
          maxW="6xl"
          color="white"
          display={"flex"}
          justifyContent={"space-between"}
          mb={6}
        >
          <Heading
            fontSize={"md"}
            fontWeight={500}
            color={colorMode === "light" ? "#000" : "#fff"}
          >
            Latest Transactions
          </Heading>
          <Link
            to=""
            style={{
              fontSize: "14px",
              color: colorMode === "light" ? "#000" : "#fff",
            }}
          >
            View all
          </Link>
        </Container>
        <LatestTransactions />
      </Box>
    </Box>
  );
};

export default Home;
