import React from 'react';
import { Box, Flex } from '../../themes/components';
import { Icon } from '../../themes/components';
const Dots = ({ length, active, activeColor, passiveColor, passiveBorderColor, numbers, dotsToShow = 7, wandAcitve }) => {
    //Maximum visible dots 5
    const MiddlePoint = Math.ceil(dotsToShow / 2);
    const dots = length > dotsToShow ? Array(dotsToShow).fill(0).map((el, index) => index) : Array(length).fill(0).map((el, index) => index);
    const createDots = (activePage) => {
        return dots.map((el, index) => {
            const isActive = el === activePage ? true : false;
            if (active < dotsToShow && el === 0) {
                return (<Box width={14} height={14} mr={5} key={`PeerIndexDot${index}`}>
            <Icon name="auto-fix" boxSize="14" fill={isActive ? wandAcitve : passiveColor}/>
          </Box>);
            }
            else {
                return (<Box key={`PeerIndexDot${index}`} width={10} height={10} mx={5} backgroundColor={isActive ? activeColor : passiveColor} 
                //Border Radius not changer because this is a circle
                borderRadius="5px" borderWidth={0} borderColor={isActive ? activeColor : passiveBorderColor}> 
        </Box>);
            }
        });
    };
    const ActiveGridIcon = () => {
        return (<Icon name="image" fill="textPrimary.100"/>);
    };
    const currentActiveDotPosition = () => {
        // Page number starts from 4
        if (length <= dotsToShow - 1) {
            return createDots(active);
        }
        else if ((numbers.left > 0 && numbers.right > 0)) {
            return createDots(MiddlePoint - 1);
        }
        else if (numbers.left === 0) {
            return createDots(active);
        }
        else if (numbers.right === 0) {
            const activeNumber = dotsToShow - (length - active);
            return createDots(activeNumber);
        }
        return null;
    };
    return (<Flex flexDirection="row" justify="center" align="center"> 
    {currentActiveDotPosition()}
    </Flex>);
};
export default Dots;
//# sourceMappingURL=dots.js.map