"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const components_1 = require("../../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) => dots.map((el, index) => {
        const isActive = el === activePage;
        if (active < dotsToShow && el === 0) {
            return (react_1.default.createElement(components_1.Box, { width: 14, height: 14, mr: 5 },
                react_1.default.createElement(components_1.Icon, { name: "auto-fix", boxSize: "14", fill: isActive ? wandAcitve : passiveColor })));
        }
        return (react_1.default.createElement(components_1.Box, { 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 }));
    });
    const ActiveGridIcon = () => react_1.default.createElement(components_1.Icon, { name: "image", fill: "textPrimary.100" });
    const currentActiveDotPosition = () => {
        // Page number starts from 4
        if (length <= dotsToShow - 1) {
            return createDots(active);
        }
        if (numbers.left > 0 && numbers.right > 0) {
            return createDots(MiddlePoint - 1);
        }
        if (numbers.left === 0) {
            return createDots(active);
        }
        if (numbers.right === 0) {
            const activeNumber = dotsToShow - (length - active);
            return createDots(activeNumber);
        }
        return null;
    };
    return (react_1.default.createElement(components_1.Flex, { flexDirection: "row", justify: "center", align: "center" }, currentActiveDotPosition()));
};
Dots.defaultProps = {
    dotsToShow: 7,
};
exports.default = Dots;
//# sourceMappingURL=dots.js.map