import {
  Box,
  Button,
  Heading,
  HStack,
  Image,
  Modal,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Progress,
  Spinner,
  Stack,
  Text,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import Mobile from "../assets/mobileWing.png";
import mobileBanner from "../assets/welcome.avif";
import { GrDownload } from "react-icons/gr";
import { LuClock } from "react-icons/lu";
import { GiNetworkBars } from "react-icons/gi";
import { GrLinkedinOption } from "react-icons/gr";
import { FiInstagram } from "react-icons/fi";
import { IoBatteryHalf } from "react-icons/io5";
import { BiWifi } from "react-icons/bi";
import { useGetIOByIdQuery } from "../Services/io.service";
import { useNavigate, useParams } from "react-router-dom";
import FullscreenLoaders from "./Loaders/FullscreenLoaders";
import { calculatePercentage, formatDate } from "../Constants/Constants";
import { BsFileText } from "react-icons/bs";

const MobileView = ({ isOpen, onClose, finalRef, actionId }) => {
  const [time, setTime] = useState(new Date());
  const navigate = useNavigate();
  const params = useParams();
  const id = actionId;

  const {
    data: IObyID,
    isLoading: IObyIDisLoading,
    error: IObyIDerror,
  } = useGetIOByIdQuery(id, { skip: !id });

  console.log(IObyID);

  const keyMerits = IObyID?.data?.keyMerits || [];
  const artifactsImage = IObyID?.data?.artifactsImage || [];

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const formatTime = (date) => {
    return date.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
      hour12: true,
    });
  };

  console.log(
    calculatePercentage(
      IObyID?.data?.totalAmtInvestmentInUSD,
      IObyID?.data?.goalAmount
    )
  );

  return (
    <Modal
      display={"flex"}
      size={"xl"}
      justifyContent={"center"}
      isCentered
      finalFocusRef={finalRef}
      isOpen={isOpen}
      onClose={onClose}
    >
      <ModalOverlay
        backdropFilter="blur(5px)" // Add this line for backdrop blur
        bg="rgba(0, 0, 0, 0.4)" // Optional: Adjust the overlay color and opacity
      />
      <ModalContent backgroundColor={"transparent"} shadow={"none"}>
        <HStack w={"100"} display={"flex"} justify={"center"}>
          <Box
            as="span"
            boxShadow={"none"}
            position={"relative"}
            display={"flex"}
            justifyContent={"center"}
            h={"600px"}
            w={"320px"}
            sx={{
              "@media (max-width: 2024px)": {
                height: "695px",
                width: "360px",
              },
              "@media (max-width: 1440px)": {
                height: "600px",
                width: "320px",
              },
            }}
          >
            <Image
              h={"100%"}
              w={"100%"}
              src={Mobile}
              position={"absolute"}
              top={"0"}
              left={"0"}
            />
            <Box
              backgroundColor={"#fff"}
              h={"98%"}
              w={"96%"}
              // m={2}
              borderRadius={"47px"}
              pt={"36px"}
              px={"15px"}
            >
              {IObyIDisLoading ? (
                <Box
                  display={"flex"}
                  justifyContent={"center"}
                  alignItems={"center"}
                  h={"100%"}
                >
                  <Spinner thickness="3px" color="purple.900" size="lg" />
                </Box>
              ) : (
                <>
                  <Box>
                    <Box
                      display={"flex"}
                      alignItems={"center"}
                      position={"absolute"}
                      left={"30px"}
                      top={"18px"}
                    >
                      <Text ml={1} mb={0}>
                        <GiNetworkBars fontSize={"10px"} />
                      </Text>
                      <Text ml={1} mb={0} fontSize={"10px"}>
                        {formatTime(time)}
                      </Text>
                      <Text ml={"5px"} mb={0}>
                        <GrLinkedinOption fontSize={"10px"} />
                      </Text>
                      {/* <Text ml={1} mb={0}><FiInstagram fontSize={"10px"} /></Text> */}
                    </Box>
                    <Box
                      display={"flex"}
                      alignItems={"center"}
                      position={"absolute"}
                      right={"36px"}
                      top={"17px"}
                    >
                      <Text mb={0}>
                        <BiWifi fontSize={"14px"} />
                      </Text>
                      <Text ml={1} mb={0}>
                        <IoBatteryHalf fontSize={"15px"} />
                      </Text>
                    </Box>
                  </Box>
                  <Box
                    p={"10px"}
                    overflowY={"scroll"}
                    h={"483px"}
                    zIndex={"99"}
                    position={"relative"}
                    borderBottomLeftRadius={"23px"}
                    borderBottomRightRadius={"23px"}
                    sx={{
                      "@media (max-width: 2024px)": {
                        height: "575px",
                      },
                      "@media (max-width: 1440px)": {
                        height: "483px",
                      },
                    }}
                  >
                    <Box
                      mb={4}
                      bg={"#f5f8f6"}
                      borderRadius={"20px"}
                      boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
                    >
                      <Box position={"relative"}>
                        <Text
                          position={"absolute"}
                          top={"12px"}
                          left={"10px"}
                          backgroundColor={"#e4f6ea"}
                          fontSize={"10px"}
                          fontWeight={500}
                          color="green"
                          p={"7px 12px"}
                          borderRadius={"20px"}
                        >
                          Stock
                        </Text>
                        <Text
                          position={"absolute"}
                          top={"12px"}
                          right={"10px"}
                          fontSize={"10px"}
                          display={"flex"}
                          alignItems={"center"}
                          fontWeight={500}
                          backgroundColor={"#fff"}
                          p={"7px 12px"}
                          borderRadius={"20px"}
                        >
                          <LuClock color="#d8804e" />{" "}
                          <Text mb={0} ml={1}>
                            Closing Date {formatDate(IObyID?.data?.closingDate)}
                          </Text>
                        </Text>
                        {artifactsImage?.[0]?.artifactPathName && (
                          <Image
                            borderTopLeftRadius={"20px"}
                            borderTopRightRadius={"20px"}
                            h={"130px"}
                            w={"100%"}
                            src={
                             import.meta.env.VITE_IMAGE_URL+
                              artifactsImage[0]?.artifactPathName
                            }
                          />
                        )}
                      </Box>
                      <Stack mt="3" bg={"#fff"} py={4} px={4}>
                        <Text
                          fontSize={"sm"}
                          fontWeight={"500"}
                          color={"#000"}
                          mb={0}
                        >
                          {IObyID?.data?.investmentType?.investmentTypeName}
                        </Text>
                        <Heading fontSize="16px" color={"#004717"}>
                          BHD {IObyID?.data?.goalAmount}
                        </Heading>
                        <Progress
                          colorScheme="green"
                          size="sm"
                          value={calculatePercentage(
                            IObyID?.data?.totalAmtInvestmentInUSD,
                            IObyID?.data?.goalAmount
                          )}
                          borderRadius={"3px"}
                        />
                        <Text
                          color={"#4e4e4e"}
                          fontSize={"xs"}
                          fontWeight={600}
                          mb={0}
                        >
                          {parseFloat(
                            calculatePercentage(
                              IObyID?.data?.totalAmtInvestmentInUSD,
                              IObyID?.data?.goalAmount
                            ) || 0
                          ).toLocaleString(undefined, {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2,
                          })}
                          % funded
                        </Text>
                        <Text
                          fontSize={"xs"}
                          fontWeight={500}
                          mb={0}
                          color={"#9d9d9d"}
                        >
                          {IObyID?.data?.descriptionEnglish}
                        </Text>
                      </Stack>
                      <Box py={4} px={4}>
                        <Box display={"flex"} justifyContent={"space-between"}>
                          <Text
                            fontSize={"xs"}
                            mb={1}
                            fontWeight={500}
                            color={"#616161"}
                          >
                            Sponsor name:
                          </Text>
                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
                            {IObyID?.data?.sponsor?.sponsorName}
                          </Text>
                        </Box>
                        <Box display={"flex"} justifyContent={"space-between"}>
                          <Text
                            fontSize={"xs"}
                            mb={1}
                            fontWeight={500}
                            color={"#616161"}
                          >
                            Estimated return:
                          </Text>
                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
                            {IObyID?.data?.expectedReturn}
                          </Text>
                        </Box>
                        <Box display={"flex"} justifyContent={"space-between"}>
                          <Text
                            fontSize={"xs"}
                            mb={1}
                            fontWeight={500}
                            color={"#616161"}
                          >
                            Hoiding period:
                          </Text>
                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
                            {IObyID?.data?.holdingPeriod}
                          </Text>
                        </Box>
                        <Box display={"flex"} justifyContent={"space-between"}>
                          <Text
                            fontSize={"xs"}
                            mb={1}
                            fontWeight={500}
                            color={"#616161"}
                          >
                            Minimum investment:
                          </Text>
                          <Text fontSize={"xs"} mb={1} fontWeight={500}>
                            {
                              IObyID?.data?.minInvestmentAmt?.[0]?.country
                                ?.minInvestmentAmt
                            }
                          </Text>
                        </Box>
                      </Box>
                    </Box>
                    <Box
                      mb={4}
                      p={5}
                      bg={"#f5f8f6"}
                      borderRadius={"20px"}
                      boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
                    >
                      <Heading fontSize="14px" fontWeight={600}>
                        Key Merits
                      </Heading>
                      <Box>
                        {keyMerits &&
                          keyMerits.map((item, index) => (
                            <Box display={"flex"} alignItems={"center"}>
                              <Image
                                rounded={"md"}
                                display={"flex"}
                                p={1}
                                justifyContent={"center"}
                                alignItems={"center"}
                                src={
                                 import.meta.env.VITE_IMAGE_URL+
                                  item?.icon.iconFilePath
                                }
                                w={8}
                                h={8}
                              />
                              <Text fontSize={"xs"} mb={0}>
                                {item?.meritsDescription}
                              </Text>
                            </Box>
                          ))}
                      </Box>
                    </Box>
                    <Box
                      mb={4}
                      p={5}
                      borderRadius={"20px"}
                      boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
                    >
                      <Heading fontSize="14px" fontWeight={600}>
                        Investment Documents
                      </Heading>
                      <Box
                        bg={"#f5f8f6"}
                        w={"150px"}
                        p={3}
                        borderRadius={"10px"}
                      >
                        <Box display={"flex"} alignItems={"center"} mb={2}>
                          {/* <Image
                        me={1}
                        src="https://tanami.betadelivery.com/public/icons/icon8.svg"
                      /> */}
                          <BsFileText color="forestGreen" fontSize="18px" />
                          <Text fontSize={"xs"} mb={0} ml={2}>
                            {IObyID?.data?.documents?.[0]?.documentName}
                          </Text>
                        </Box>
                        <Box
                          display={"flex"}
                          alignItems={"center"}
                          justifyContent={"space-between"}
                        >
                          <Text mb={0} fontSize={"sm"}>
                            {IObyID?.data?.documents?.[0]?.documentSize}
                          </Text>
                          <GrDownload fontSize={"15px"} />
                        </Box>
                      </Box>
                    </Box>
                    <Box
                      mb={4}
                      p={4}
                      borderRadius={"20px"}
                      boxShadow={"rgba(0, 0, 0, 0.15) 0px 2px 8px"}
                    >
                      <Heading fontSize="14px" fontWeight={600}>
                        Videos
                      </Heading>
                      <video
                        autoPlay
                        loop
                        controls
                        style={{
                          borderRadius: "18px",
                          width: "100%",
                          height: "auto",
                        }}
                      >
                        <source
                          src={
                            import.meta.env.VITE_IMAGE_URL+IObyID?.data?.artifactsVideo?.[0]
                              ?.artifactStreamingURL
                          }
                          type="video/mp4"
                          style={{ height: "200px" }}
                        />
                        Your browser does not support the video tag.
                      </video>
                    </Box>
                  </Box>

                  <Box
                    position={"relative"}
                    p={4}
                    background={"#fff"}
                    padding={"24px"}
                    paddingBottom={"3px"}
                    borderBottomLeftRadius={"30px"}
                    borderBottomRightRadius="30px"
                  >
                    <Button
                      margin={"auto"}
                      width={"85%"}
                      bottom="10px"
                      left="0"
                      colorScheme="forestGreen"
                      mr={3}
                      w={"100%"}
                      fontWeight={500}
                      borderRadius={"20px"}
                    >
                      Invest
                    </Button>
                  </Box>
                </>
              )}
            </Box>
          </Box>
        </HStack>
      </ModalContent>
    </Modal>
  );
};

export default MobileView;