import React from 'react';
import { Box, Text, Flex } from '../../themes/components';
import { calculateDotNumber } from '../../utils/pagination';
import { useSelector } from 'react-redux';
import Colors from '../../themes/foundations/color';
import Dots from './dots';
const PaginationDots = () => {
    const joinedPeers = useSelector((state) => state.peers.joinedPeers);
    const [showAutoLayoutAvilable, setshowAutoLayoutAvilable] = React.useState(false);
    const [dotNumbers, setDotNumbers] = React.useState({
        left: 0,
        right: 0
    });
    const noOfPages = Math.ceil(((joinedPeers.length + 1) / 6));
    const currentPage = useSelector((state) => state.room.currentPage);
    // const noOfPages = 12
    // const currentPage = 6
    React.useEffect(() => {
        if (noOfPages > 1) {
            if (currentPage == 0) {
                setshowAutoLayoutAvilable(true);
                setTimeout(() => {
                    setshowAutoLayoutAvilable(false);
                }, 1000);
            }
            else if (currentPage !== 0 && showAutoLayoutAvilable) {
                setshowAutoLayoutAvilable(false);
            }
            if (noOfPages > 7) {
                setDotNumbers({ ...calculateDotNumber(noOfPages, currentPage) });
            }
        }
    }, [currentPage]);
    if (noOfPages > 1) {
        return (<Flex zIndex={50} align="center" justify="center" position="relative">
      {showAutoLayoutAvilable &&
            (<Box bg={'paginationDots.inactive'} position="absolute" bottom={25}>
      <Text textAlign={'center'} color={'textPrimary.200'}> Active Speaker Grid</Text>
      </Box>)}
      <Flex direction="row" height="22px" align="center" justify="center">
      
      <Flex mr={5} height={20} 
        //Border Radius not changer because this is a circle
        borderRadius={"20px"} width={32} align="center">
          <Text fontWeight="bold" fontSize={14} color={dotNumbers.left > 0 ? 'textPrimary.400' : 'rgba(0,0,0,0)'} px={4} py={2}>{dotNumbers.left}+</Text>
      </Flex>
      
      <Dots numbers={dotNumbers} length={noOfPages + 1} active={currentPage} activeColor={Colors.paginationDots['active']} passiveBorderColor={Colors.paginationDots['active']} passiveColor={Colors.paginationDots['inactive']} wandAcitve={Colors.paginationDots['wandActive']}/>
   
      <Flex ml={5} height={20} 
        //Border Radius not changer because this is a circle
        borderRadius={"20px"} width={32} align="center">
        <Text fontWeight="bold" fontSize={14} color={dotNumbers.right ? 'textPrimary.400' : 'rgba(0,0,0,0)'} px={4} py={2}>+{dotNumbers.right}</Text>
      </Flex>
      
      </Flex>
    </Flex>);
    }
    else
        return null;
};
export default PaginationDots;
//# sourceMappingURL=index.js.map