import React from 'react';
import { st, classes } from './AvatarGroup.st.css.js';
import Avatar from '../Avatar';
import Text from '../Text';
import Divider from '../Divider';
import { dataHooks } from './constants';
const avatarSizeMap = {
    medium: 'size30',
    small: 'size24',
    tiny: 'size18',
};
const tinySizeMaxIndicatorCount = 9;
const getRandomColorPattern = () => {
    const patternColor = [
        'A1',
        'A2',
        'A3',
        'A4',
        'A5',
        'A6',
        'A1',
        'A2',
        'A3',
        'A4',
        'A5',
        'A6',
    ];
    const firstIndex = Math.floor(Math.random() * 6); // get random number between 0 to 5
    const lastIndex = firstIndex + 6;
    return patternColor.slice(firstIndex, lastIndex);
};
const myPatternColors = getRandomColorPattern();
const getAvatarColor = ({ index, color }) => {
    let colorIndex = index;
    if (color) {
        return color;
    }
    while (colorIndex > 5) {
        colorIndex = colorIndex - 6;
    }
    return myPatternColors[colorIndex];
};
const setAvatarCompPropsArr = (items, avatarSize, itemsMaxLength) => {
    // gets the items prop from avatarGroup component and set it with the proper prop for avatar component such as size, shape etc.
    const avatarItems = items.map((item, index) => {
        const { ariaLabel, color, imgProps, name, text, placeholder, title } = item;
        const size = avatarSizeMap[avatarSize];
        const shape = 'circle';
        const avatarColor = getAvatarColor({ index, color });
        return {
            size,
            shape,
            ariaLabel,
            color: avatarColor,
            imgProps,
            name,
            text,
            placeholder,
            title,
        };
    });
    const avatars = avatarItemsLengthHandler(avatarItems, avatarItems.length, itemsMaxLength, avatarSize);
    return avatars;
};
const avatarItemsLengthHandler = (items, itemsLength, maxItems, avatarSize) => {
    const remainingAvatarsCount = itemsLength - maxItems + 1;
    const moreItemAvatar = {
        text: `${avatarSize === 'tiny' && remainingAvatarsCount > tinySizeMaxIndicatorCount ? tinySizeMaxIndicatorCount : remainingAvatarsCount}+`,
        size: avatarSizeMap[avatarSize],
        isMoreItem: true,
    };
    if (itemsLength > maxItems && maxItems >= 2) {
        items.length = maxItems;
        items[maxItems - 1] = moreItemAvatar;
    }
    return items;
};
const MoreIndicator = ({ text, size }) => (React.createElement("div", { "data-hook": dataHooks.avatarGroupMoreItem, className: st(classes.moreIndicatorCircle, { size }) },
    React.createElement(Text, { secondary: true, weight: "normal", className: classes.moreIndicatorText }, text)));
/** AvatarGroup */
const AvatarGroup = ({ dataHook, className, type = 'stretched', items = [], maxItems = 5, size = 'medium', showDivider = false, }) => {
    const itemsMaxLength = maxItems < 2 ? 2 : maxItems;
    const avatarCompArr = setAvatarCompPropsArr(items, size, itemsMaxLength);
    return (React.createElement("div", { className: st(classes.root, { size, type }, className), "data-hook": dataHook }, avatarCompArr.map((item, index) => {
        const key = `${Object.values(item)}`;
        if (item.isMoreItem) {
            return (React.createElement("div", { key: key, className: classes.avatarContainer },
                React.createElement(MoreIndicator, { text: item.text, size: size })));
        }
        const shouldIncludeDivider = index === 0 && showDivider && avatarCompArr.length > 1;
        return (React.createElement(React.Fragment, { key: key },
            React.createElement("div", { className: classes.avatarContainer },
                React.createElement(Avatar, { ...item, dataHook: dataHooks.avatarGroupItem })),
            shouldIncludeDivider && (React.createElement(Divider, { direction: "vertical", className: st(classes.divider, { size, type }) }))));
    })));
};
AvatarGroup.displayName = 'AvatarGroup';
export default AvatarGroup;
//# sourceMappingURL=AvatarGroup.js.map