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