import {
  Box,
  Container,
  Grid,
  GridItem,
  HStack,
  Skeleton,
  Spinner,
  Text,
  useColorMode,
  VStack,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import { FaFileAlt, FaFileContract, FaMoneyCheckAlt, FaShoppingCart } from "react-icons/fa";
import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
import { PiCircuitryFill, PiWalletFill } from "react-icons/pi";
import { LiaFileContractSolid } from "react-icons/lia";
import { TbTransactionDollar } from "react-icons/tb";
import { BsRCircleFill } from "react-icons/bs";
import { useGetKPIDetailsQuery } from "../../Services/api.service";


const AmountCard = () => {
  const { colorMode} = useColorMode();
  const [ kpDetails, setKpDetails ] = useState(null)



  const {
    data,
    isLoading,
  } = useGetKPIDetailsQuery()

  useEffect(() => {
    setKpDetails(data?.data)
  }, [data])
  


  const statsData = [
    {
      label: "RBT Price",
      value: kpDetails?.rbtPrice,
      icon: <FaWallet color="white" fontSize={"20px"} />,
    },
    {
      label: "Transaction",
      value: kpDetails?.transactionCount,
      icon: <FaMoneyCheckAlt color="white" fontSize={"29px"} />,
    },
    {
      label: "DID count",
      value: kpDetails?.didCount,
      icon: <FaFileAlt color="white" fontSize={"20px"} />,
    },
    {
      label: "Total Supply",
      value: kpDetails?.totalSupply,
      icon: <FaGlobe color="white" fontSize={"20px"} />,
      display: { base: "block", md: "none" }, // Hidden on small, shown on medium and up
    },
  ];
  console.log(Number(kpDetails?.tvL_RBT).toFixed(3)); // Using Number()


  const statsDataFour = [
    {
      label: "Total Supply",
      value: kpDetails?.totalSupply,
      icon: <FaGlobe color="white" fontSize={"20px"} />,
      display: { base: "none", md: "block" }, // Hidden on small, shown on medium and up
    },
    {
      label: "Circulating Supply",
      value: kpDetails?.circulatingSupply,
      icon: <PiCircuitryFill color="white" fontSize={"20px"} />,
    },
    {
      label: "Total Value Locked (TVL)",
      value: Number(kpDetails?.tvL_RBT).toFixed(3),
      icon: <BsRCircleFill color="white" fontSize={"20px"} />,
    },
    {
      label: "Number of smart contracts",
      value: kpDetails?.numberContracts,
      icon: <FaFileContract color="white" fontSize={"20px"} />,
    },
  ];

  return (
    <VStack>
      <Container maxW="4xl">
        <Grid
        
          mb={{base:"10px",md:"16px" }}
          // templateColumns="repeat(3, 2fr)"
          templateColumns={{base :"repeat(2, 2fr)",md : "repeat(3, 2fr)" }}
          gap={{base:4,md:6}}
          bg={colorMode === "light" ? "light.100" : "black.900"}
          justifyContent="center"
          alignItems="center"
        >
          {statsData.map((item, index) => (
            <Box  display={item.display || "block"}>
              <GridItem
                key={index}
                bg={
                  colorMode === "light"
                    ? "#230A7926"
                    : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
                }
                display={"flex"}
                justifyContent={"space-between"}
                alignItems={"center"}
                p={3}
                rounded={"lg"}
                boxShadow={'md'}
              >
                <Box>
                  <Text
                    fontSize={"xs"}
                    color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
                  >
                    {item.label}
                  </Text>
                  <Text
                    fontWeight={600}
                    fontSize={"sm"}
                    color={colorMode === "light" ? "#230A79" : "#fff"}
                  >
                    {isLoading ? <Spinner size='xs' />:item.value}
                  </Text>
                </Box>
                <Box
                  backgroundColor={"#4023A6"}
                  w={30}
                  h={30}
                  display={"flex"}
                  alignItems={"center"}
                  justifyContent={"center"}
                  rounded={10}
                  p={2}
                >
                  {item.icon}
                </Box>
              </GridItem>
            </Box>
          ))}
        </Grid>
      </Container>
      <Container maxW="6xl">
        <Grid
          // templateColumns="repeat(4, 2fr)"
          templateColumns={{base:"repeat(2, 2fr)",md :"repeat(4, 2fr)"}}
          gap={{base:4,md:6}}
          bg={colorMode === "light" ? "light.100" : "black.900"}
          justifyContent="center"
          alignItems="center"
        >
          {statsDataFour.map((item, index) => (
            <Box  display={item.display || "block"}>
              <GridItem
                key={index}
                bg={
                  colorMode === "light"
                    ? "#230A7926"
                    : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
                }
                display={"flex"}
                justifyContent={"space-between"}
                alignItems={"center"}
                p={3}
                rounded={"lg"}
                boxShadow={'md'}
              >
                <Box>
                  <Text
                    fontSize={"xs"}
                    color={colorMode === "light" ? "#230A79" : "#A0AEC0"}

                  >
                    {item.label}
                  </Text>
                  <Text
                    fontSize={"sm"}
                    fontWeight={600}
                    color={colorMode === "light" ? "#230A79" : "#fff"}
                  >
                  {isLoading ? <Spinner size='xs' />:item.value}
                  </Text>
                </Box>
                <Box
                  backgroundColor={"#4023A6"}
                  w={30}
                  h={30}
                  display={"flex"}
                  alignItems={"center"}
                  justifyContent={"center"}
                  rounded={10}
                  p={2}
                >
                  {item.icon}
                </Box>
              </GridItem>
            </Box>
          ))}
        </Grid>
      </Container>
    </VStack>
  );
};

export default AmountCard;
