import { Box, HStack, Icon, position, Text, VStack } from '@chakra-ui/react'
import React from 'react'
import { HiOutlineChartSquareBar } from 'react-icons/hi'
import { RiMoneyDollarBoxLine } from 'react-icons/ri'
import { TbTransactionDollar } from 'react-icons/tb'
import { VscSymbolClass } from 'react-icons/vsc'
import { TABLE_PAGINATION } from '../Constants/Paginations'
import FullscreenLoaders from '../Components/Loaders/FullscreenLoaders'
import { useGetIOprepopulateDataQuery, useGetIOsQuery } from '../Services/io.service'
import { useGetInvestorsQuery } from '../Services/investor.details.service'
import DonutChart from '../Components/Doughnut/DonutChart'
import { GoDotFill } from "react-icons/go";
import { useNavigate } from 'react-router-dom'
import LineChart from '../Components/Doughnut/LineChart'
import { PiChartLineUpDuotone } from 'react-icons/pi'
import ApexChart from '../Components/Doughnut/ApexDonut'
import ApexLine from '../Components/Doughnut/ApexLine'
import ReactApexChart from 'react-apexcharts'
import { BsGraphUpArrow } from "react-icons/bs";


const Dashbaord = () => {
  const navigate = useNavigate()
  const { data, isLoading: isIoPreLoading } = useGetIOprepopulateDataQuery();
  const { data: IO, isLoading: isIoLoading } = useGetIOsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
  const { data: investorDetails, isInvestorLoading } = useGetInvestorsQuery({ page: TABLE_PAGINATION?.page, size: TABLE_PAGINATION?.size });
  const sortArrayByStatus = () => {
    const sortedArrays = {
      open: [],
      closed: [],
      processing: [],
      draft: []
    };

    IO?.data?.rows.forEach(item => {
      const status = item.ioStatus?.statusAdmin;
      if (status === 'Open') {
        sortedArrays.open.push(item);
      } else if (status === 'Closed') {
        sortedArrays.closed.push(item);
      } else if (status === 'Processing') {
        sortedArrays.processing.push(item);
      } else if (status === 'Draft') {
        sortedArrays.draft.push(item);
      }
    });
    return sortedArrays;
  };
  const statusData = sortArrayByStatus()
  const chartData = {
    labels: ['Draft', 'Open', 'Processing', 'Closed',],
    backgroundColor: ['#3182ce', '#004118', '#D69E2E', '#E53E3E'],
    values: [statusData?.draft?.length, statusData?.open?.length, statusData?.processing?.length, statusData?.closed?.length]
  };



  const series1= [{
    data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54]
  }]
  const options1= {
    chart: {
      type: 'line',
      position:"absolute",
      right:0,
      width: 100,
      height: 35,
      sparkline: {
        enabled: true
      }
    },
    tooltip: {
      fixed: {
        enabled: false
      },
      x: {
        show: false
      },
      y: {
        title: {
          formatter: function (seriesName) {
            return ''
          }
        }
      },
      marker: {
        show: false
      }
    }
  }








  return (
    isIoPreLoading || isIoLoading || isInvestorLoading ? <FullscreenLoaders /> :
    <Box height={'100vh'} bg={'#fff'} roundedTop={0} pt={5} overflowX={"hidden"}>
      <Box display={'flex'} gap={6} w={'100%'} pt={3} pb={3} p={3} >
        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investor-details")} boxShadow={'lg'} color={"#004118"} p={4} rounded={'xl'} w={'25%'} display={'flex'} bg={'#f5f8f6'} flexDirection={'column'} alignItems={'start'}  >
          <Icon left={"10px"} bg={'#004118'} rounded={9} p={2} color={"#fff"} as={TbTransactionDollar} mb={6} boxSize={12} />
          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investors</Text>
          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{investorDetails?.data?.totalItems}</Text>
          <Icon  position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow}  />
          {/* <ReactApexChart position={'absolute'} right={6} bottom={6} options={options1} series={series1} type="line" height={35} width={100} /> */}
        </Box>
        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/view-io")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={HiOutlineChartSquareBar} mb={6} boxSize={12} />
          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total IO</Text>
          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{IO?.data?.totalItems}</Text>
          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/sponser")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={RiMoneyDollarBoxLine} mb={6} boxSize={12} />
          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total sponors</Text>
          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.sponsor?.length}</Text>
          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
        <Box position={'relative'} cursor={'pointer'} onClick={() => navigate("/investment-type")} boxShadow={'lg'} bg={'#f5f8f6'} color={"#004118"} p={3} rounded={'xl'} w={'25%'} display={'flex'} flexDirection={'column'} alignItems={'start'} >
          <Icon bg={'#004118'} rounded={9} p={2} color={"#fff"} as={VscSymbolClass} mb={6} boxSize={12} />
          <Text as={'span'} fontSize={'xs'} fontWeight={500}>Total Investment Type</Text>
          <Text as={'span'} fontSize={'32px'} fontWeight={600}>{data?.data?.investmentType?.length}</Text>
          <Icon position={'absolute'} right={6} bottom={6} boxSize={8} as={BsGraphUpArrow} />
        </Box>
      </Box>
      <Box h={'70%'} w={"100%"} display={'flex'} pe={4} mt={2}>
        <Box w={'60%'} h={'100%'} p={4} pe={6} pt={1}  >
          <Box position={'relative'} h={'100%'} boxShadow={'lg'} display={'flex'} justifyContent={'center'} rounded={'xl'} p={5} ps={0} pe={0}>
            {/* <Text position={'absolute'} top={0} left={6} as={'span'} fontSize={'sm'}>Exchange rate currency</Text>  */}
             {/* <LineChart /> */}
            <ApexLine/>
          </Box>
        </Box>




        <Box  boxShadow={'lg'} position={"relative"} bg={'#fff'} rounded={'xl'} w={'40%'} display={'flex'} justifyContent={'space-between'} flexDirection={'column'} h={"95%"} mt={1} p={4}>
          <Text  as={'span'} fontSize={'sm'}>IO Status</Text>
          <Box display={'flex'} w={'100%'} h={'100%'} alignItems={'center'}  justifyContent={'space-around'} >
          {/* <Box display={'flex'} w={'70%'} alignItems={'center'} h={325} p={6}> */}
            {/* <DonutChart data={chartData} /> */}

            <ApexChart data={chartData} />
          {/* </Box> */}
          <VStack alignItems={'start'} justifyContent={'center'} flexWrap={'wrap'}>
            {chartData?.labels?.map((item, index) => <Text key={index} as={'span'} display={'flex'} gap={0.5} alignItems={'center'} fontSize={'sm'} fontWeight={600}><GoDotFill color={chartData?.backgroundColor[index]} fontSize={30} />{item}</Text>)}
          </VStack>
          </Box>
        </Box>


        
      </Box>
    </Box>
    )
}

export default Dashbaord