var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useMemo, useState } from 'react';
import { Building, People } from '@procore/core-icons/dist';
import { Modal } from '../Modal';
import { Avatar } from '../Avatar';
import { Button } from '../Button';
import { ContactItem } from '../ContactItem';
import { Link } from '../Link';
import { Popover } from '../Popover';
import { Typography } from '../Typography';
import { StyledAvatar, StyledViewAllWrapper, StyledWrapper, StyledContactItems, StyledViewAll, StyledModalBody, StyledContactItem, } from './AvatarStack.styles';
import { colorsOrder, foldedItemsCap, restCountThreshold, visibleItemsCap, } from './AvatarStack.constants';
import { useI18nContext } from '../../state/I18n';
export var getOverflowValues = function (items) {
    var foldedItems = [];
    var restCountLabel = null;
    var isViewAllNeeded = false;
    var visibleItems = items.length > visibleItemsCap ? items.slice(0, visibleItemsCap - 1) : items;
    var restItemsCount = items.length - visibleItems.length;
    if (restItemsCount > 0) {
        foldedItems = items.slice(visibleItems.length, visibleItems.length + foldedItemsCap);
        restCountLabel =
            restItemsCount > restCountThreshold
                ? "".concat(restCountThreshold, "+")
                : "+".concat(restItemsCount);
        isViewAllNeeded = restItemsCount > foldedItemsCap;
    }
    return {
        visibleItems: visibleItems,
        foldedItems: foldedItems,
        restCountLabel: restCountLabel,
        isViewAllNeeded: isViewAllNeeded,
    };
};
export function getIcon(type, size) {
    switch (type) {
        case 'company':
            return React.createElement(Building, { size: size });
        case 'group':
            return React.createElement(People, { size: size });
        case 'user':
        default:
            return null;
    }
}
function getContactIcon(type) {
    return getIcon(type, 'md');
}
function getAvatarIcon(type, size) {
    var avatarSize = size === 'lg' ? 'md' : 'sm';
    return getIcon(type, avatarSize);
}
export function getColorOrder(avatarItems) {
    return avatarItems.reduce(function (_a, item) {
        var map = _a.map, color = _a.color;
        if (item.imageUrl) {
            return {
                map: map,
                color: color,
            };
        }
        if (item.inactive) {
            map.set(item.id, 'gray70');
            return {
                map: map,
                color: color,
            };
        }
        map.set(item.id, color);
        var currentColorIndex = colorsOrder.indexOf(color);
        var nextColorIndex = (currentColorIndex + 1) % colorsOrder.length;
        return {
            map: map,
            color: item.imageUrl ? color : colorsOrder[nextColorIndex],
        };
    }, {
        map: new Map(),
        color: colorsOrder[0],
    }).map;
}
export function AvatarStackContactItem(_a) {
    var item = _a.item, _b = _a.item, id = _b.id, type = _b.type, imageUrl = _b.imageUrl, initials = _b.initials, inactive = _b.inactive, name = _b.name, linkUrl = _b.linkUrl;
    return (React.createElement(StyledContactItem, { key: id, imageUrl: imageUrl, initials: initials, icon: getContactIcon(type), disabled: inactive },
        React.createElement(ContactItem.Title, null, !inactive && linkUrl ? React.createElement(Link, { href: linkUrl }, name) : name),
        React.createElement(ContactItem.Description, null, item.type === 'group' ? (React.createElement(Typography, { color: "gray15" }, item.description)) : (item.description))));
}
export function AvatarContent(_a) {
    var item = _a.item, size = _a.size;
    var avatarIcon = getAvatarIcon(item.type, size);
    if (item.type === 'user' && item.imageUrl) {
        return React.createElement(Avatar.Portrait, { imageUrl: item.imageUrl });
    }
    if (avatarIcon) {
        return React.createElement(Avatar.Icon, { icon: avatarIcon });
    }
    if (item.initials) {
        return React.createElement(Avatar.Label, null, item.initials);
    }
    return null;
}
export function BaseAvatarStack(_a) {
    var items = _a.items, size = _a.size, colors = _a.colors;
    return (React.createElement(React.Fragment, null, items.map(function (item) {
        return (React.createElement(Popover, { key: item.id, trigger: "hover", overlay: React.createElement(Popover.Content, null,
                React.createElement(AvatarStackContactItem, { item: item })) },
            React.createElement(StyledAvatar, { clickable: true, size: size, "$color": colors.get(item.id), disabled: item.inactive },
                React.createElement(AvatarContent, { item: item, size: size }))));
    })));
}
export function FoldedAvatarStack(_a) {
    var items = _a.items, onClickViewAll = _a.onClickViewAll, size = _a.size, restCountLabel = _a.restCountLabel, isViewAllNeeded = _a.isViewAllNeeded;
    var I18n = useI18nContext();
    return (React.createElement(Popover, { trigger: "hover", overlay: React.createElement(Popover.Content, null,
            React.createElement(StyledContactItems, null, items.map(function (item) { return (React.createElement(AvatarStackContactItem, { key: item.id, item: item })); })),
            isViewAllNeeded && (React.createElement(StyledViewAllWrapper, null,
                React.createElement(StyledViewAll, { "data-qa": "core-avatar-stack-view-all-modal-trigger", color: "blue50", onClick: onClickViewAll }, I18n.t('core.avatarStack.viewAll'))))) },
        React.createElement(StyledAvatar, { "data-qa": "core-avatar-stack-folded-avatars-popover-trigger", size: size, "$color": "gray85", clickable: true },
            React.createElement(Avatar.Label, null,
                React.createElement(Typography, { color: "black" }, restCountLabel)))));
}
export var ViewAllModal = function (_a) {
    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, items = _a.items;
    var I18n = useI18nContext();
    return (React.createElement(Modal, { open: isOpen },
        React.createElement(Modal.Header, { onClose: onClose },
            title,
            " (",
            items.length,
            ")"),
        React.createElement(StyledModalBody, null, items.map(function (item) { return (React.createElement(AvatarStackContactItem, { key: item.id, item: item })); })),
        React.createElement(Modal.Footer, null,
            React.createElement(Modal.FooterButtons, null,
                React.createElement(Button, { onClick: onClose }, I18n.t('core.avatarStack.close'))))));
};
/**

 We use avatars to visually represent our users, places, and things in the app.
 These can be in the form of rich media or representative illustrations.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)

 @see [Design Guidelines](https://design.procore.com/avatar-stack)

 */
export var AvatarStack = forwardRef(function AvatarStack(_a, ref) {
    var items = _a.items, title = _a.title, _b = _a.size, size = _b === void 0 ? 'lg' : _b, props = __rest(_a, ["items", "title", "size"]);
    var _c = useState(false), isModalOpen = _c[0], setIsModalOpen = _c[1];
    var _d = useMemo(function () { return getOverflowValues(items); }, [items]), visibleItems = _d.visibleItems, foldedItems = _d.foldedItems, restCountLabel = _d.restCountLabel, isViewAllNeeded = _d.isViewAllNeeded;
    var visibleItemsColors = useMemo(function () { return getColorOrder(visibleItems); }, [visibleItems]);
    return (React.createElement("div", __assign({ ref: ref }, props),
        isViewAllNeeded && (React.createElement(ViewAllModal, { isOpen: isModalOpen, onClose: function () { return setIsModalOpen(false); }, title: title, items: items })),
        React.createElement(StyledWrapper, null,
            React.createElement(BaseAvatarStack, { items: visibleItems, colors: visibleItemsColors, size: size }),
            foldedItems.length > 0 && (React.createElement(FoldedAvatarStack, { restCountLabel: restCountLabel, isViewAllNeeded: isViewAllNeeded, items: foldedItems, onClickViewAll: function () { return setIsModalOpen(true); }, size: size })))));
});
AvatarStack.displayName = 'AvatarStack';
//# sourceMappingURL=AvatarStack.js.map