import {
  Box,
  Button,
  keyframes,
  Stack,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  useDisclosure
} from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import InvestmentDocument from "../CreateIO/InvestmentDocument";
import Investors from "../CreateIO/Investors";
import IOArtifacts from "../CreateIO/IOArtifacts";
import KeyMerits from "../CreateIO/KeyMerits";
import ViewIOdataHeader from "./ViewIOdataHeader";
import ViewIOdetails from "./ViewIOdetails";
// import IOCashDetails from "../CreateIO/IOCashDetailsold";
// import IONAVDetails from "../CreateIO/IONAVDetailsOld";
import { GoDotFill } from "react-icons/go";
import {
  useGetIOByIdQuery,
  useGetIOprepopulateDataQuery,
} from "../../../Services/io.service";
import Destribution from "../CreateIO/Destribution";
import IOCashDetails from "../CreateIO/IOCashDetails/IOCashDetails";
import IONAVDetails from "../CreateIO/IONAVDetails/IONAVDetails";
import IOTransaction from "../CreateIO/IOTransaction/IOTransaction";

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const ViewIOdata = () => {
  const params = useParams();
  const id = params?.id;
  const { data, error, isLoading, refetch } = useGetIOprepopulateDataQuery();
  const {
    data: IObyID,
    isLoading: IObyIDisLoading,
    error: IObyIDerror,
    refetch: IObyIDrefetch,
  } = useGetIOByIdQuery(id, { skip: !id });
  const { isOpen, onOpen, onClose } = useDisclosure();
  const navigate = useNavigate();
  const [isEditing, setIsEditing] = useState(false);
  const [isRefetchLoading, setIsRefetchLoading] = useState(false);
  const { IODetails, setIODetails } = useContext(GlobalStateContext);

  const tabs = [
    { label: "IO Details", content: <ViewIOdetails data={data?.data} /> },
    {
      label: "Investment documents",
      content: <InvestmentDocument data={data?.data} />,
    },
    { label: "Key merits", content: <KeyMerits data={data?.data} /> },
    { label: "IO artifacts", content: <IOArtifacts data={data?.data} /> },
    { label: "Investors", content: <Investors data={data?.data} /> },
    // { label: "Investors", content: <UnderConstruction h={'75vh'}  /> },
    { label: "IO Cash Details", content: <IOCashDetails data={data?.data} /> },
    { label: "IO NAV Details", content: <IONAVDetails data={data?.data} /> },
    {
      label: "Distribution to Investors",
      content: <Destribution data={data?.data} />,
    },
    {
      label: "IO Transaction",
      content: <IOTransaction data={data?.data} />,
    },
    // { label: "Distribution to Investors", content: <UnderConstruction h={'75vh'}  />  },
  ];

  const handleRefresh = async () => {
    setIsRefetchLoading(true);

    await IObyIDrefetch();
    setIsRefetchLoading(false);
  };

  console.log(IODetails?.ioNAVHistory);

  return (
    <Box
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      overflowX={"hidden"}
      height={"100vh"}
      pb={14}
    >
      <Box paddingInline={"12px"} mt={2}>
        {/* <span
          onClick={() => navigate(-1)}
          style={{ fontSize: "15px", cursor: "pointer" }}
        >
          <ArrowBackIcon cursor={"pointer"} /> Back
        </span> */}
        <ViewIOdataHeader />
      </Box>

      <Tabs mt={4}>
        <TabList justifyContent={"space-between"} pe={4} alignItems={"center"}>
          <Box display={"flex"} position={"relative"} w={"100%"}>
            {tabs.map(({ label }, index) => (
              <Tab
                px={3}
                isDisabled={
                  index === 0 ||
                  index === 1 ||
                  index === 2 ||
                  index === 3 ||
                  index === 4 ||
                  index === 8
                    ? false
                    : !IODetails?.isInvestedAmount
                }
                // isDisabled={
                //   index === 0 ||
                //   index === 1 ||
                //   index === 2 ||
                //   index === 3 ||
                //   index === 4
                //     ? false
                //     : !IODetails?.isInvestedAmount
                // }
                key={index}
                fontSize={"xs"}
                _selected={{
                  color: "#004118",
                  borderBottom: "2px solid #38a169",
                }}
                fontWeight={500}
                position={"relative"}
              >
                {label}{" "}
                {(index === 5 &&
                  IODetails?.ioCashStatusHistory?.Pending?.length !== 0) ||
                (index === 6 &&
                  IODetails?.ioNAVStatusHistory?.Pending?.length !== 0) ||
                (index === 8 &&
                  IODetails?.ioTransactionRecords?.Pending?.length !== 0) ? (
                  <Box
                    as="span"
                    right={0}
                    color={"forestGreen"}
                    top={1}
                    position={"absolute"}
                  >
                    <GoDotFill />
                  </Box>
                ) : (
                  ""
                )}
              </Tab>
            ))}
            {/* <Box as="span" position={"absolute"} right={2} bottom={1}>
              <Icon
                ms={0}
                animation={
                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
                }
                bg={"gray.50"}
                onClick={handleRefresh}
                fontWeight={600}
                as={RepeatIcon}
                boxSize={8}
                p={2}
                rounded={"full"}
                _hover={{ bg: "gray.100" }}
                cursor={"pointer"}
              />
            </Box> */}
            <Stack
              position={"absolute"}
              right={1}
              bottom={1}
              direction="row"
              spacing={4}
            >
              <Button
                isLoading={isRefetchLoading}
                loadingText="Refresh"
                colorScheme="forestGreen"
                variant="solid"
                size={"xs"}
                onClick={handleRefresh}
                fontWeight={400}
              >
                Refresh
              </Button>
            </Stack>
          </Box>
        </TabList>
        <TabPanels>
          {tabs.map(({ content }, index) => (
            <TabPanel key={index}>{content}</TabPanel>
          ))}
        </TabPanels>
      </Tabs>
    </Box>
  );
};

export default ViewIOdata;