import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useRef } from 'react';
import Alert from '../Badges/Alert';
import Button from '../Button';
import Flex from '../Flex';
import Icon, { registerIcon } from '../Icon';
import * as pinIcon from '../Icon/icons/pin.icon';
import * as pinSolidIcon from '../Icon/icons/pin-solid.icon';
import MetaList from '../MetaList';
import EmptyState from '../EmptyState';
import Progress from '../Progress';
import SummaryItem from '../SummaryItem';
import Text from '../Text';
import { useI18n } from '../../hooks';
import { StyledLoading } from './AppShell.styles';
import { StyledAppShellListWrapper, StyledAppShellList, StyledAppShellSummaryList, StyledAppShellMetaList, StyledNotificationPrimary, StyledNotificationSecondary, StyledAppShellPinButton, EmptyStateColorContrast, StyledAppShellListSection, StyledAppShellListHeading, StyledNotificationVisual } from './AppShellList.styles';
import { StyledDrawerViewAll } from './Drawer.styles';
import { AppShellDrawerContext } from './AppShellContext';
registerIcon(pinIcon, pinSolidIcon);
const List = ({ headingText, emptyText, items, loading = false, displayPins = false, onItemClick, onItemPinToggle, viewAll: viewAllProps }) => {
    const t = useI18n();
    const { closeDrawer } = useContext(AppShellDrawerContext);
    const pinButtons = useRef({});
    const renderContent = items.length ? (_jsx(Flex, { as: StyledAppShellList, item: { grow: 1 }, children: items.map(({ id, primary, secondary, visual, unread, href, onClick, pinned, onPinToggle, ...restProps }) => {
            const onSummaryItemClick = (e) => {
                onClick?.(id, e);
                onItemClick?.(id, e);
                if (!pinButtons.current[id]?.contains(e.target)) {
                    closeDrawer();
                }
            };
            return (_jsx(StyledAppShellSummaryList, { children: _jsx(SummaryItem, { ...restProps, as: href ? 'a' : 'button', primary: _jsx(StyledNotificationPrimary, { unread: unread, children: primary }), secondary: secondary?.length ? (_jsx(StyledNotificationSecondary, { unread: unread, children: _jsx(MetaList, { as: StyledAppShellMetaList, items: secondary }) })) : undefined, visual: visual || unread ? (_jsxs(StyledNotificationVisual, { unread: unread, visualIncluded: !!visual, children: [visual, " ", _jsx(Alert, { variant: 'urgent' })] })) : undefined, href: href, onClick: onSummaryItemClick, onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            onSummaryItemClick(e);
                        }
                    }, actions: displayPins ? (_jsx(Button, { ref: el => {
                            if (!el)
                                delete pinButtons.current[id];
                            else
                                pinButtons.current[id] = el;
                        }, icon: true, as: StyledAppShellPinButton, forwardedAs: 'div', onClick: () => {
                            onPinToggle?.(id);
                            onItemPinToggle?.(id);
                        }, onKeyDown: (e) => {
                            if (e.key === 'Enter') {
                                onPinToggle?.(id);
                                onItemPinToggle?.(id);
                            }
                        }, role: 'button', tabIndex: 0, label: t(pinned ? 'app_shell_unpin' : 'app_shell_pin'), "aria-label": `${t(pinned ? 'app_shell_unpin' : 'app_shell_pin')} - ${primary}`, children: _jsx(Icon, { name: pinned ? 'pin-solid' : 'pin' }) })) : undefined, tabIndex: 0 }) }, id));
        }) })) : (_jsx(Flex, { as: EmptyStateColorContrast, container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(EmptyState, { message: emptyText }) }));
    return (_jsxs(Flex, { as: StyledAppShellListSection, container: { direction: 'column' }, children: [headingText && (_jsx(Text, { variant: 'h3', as: StyledAppShellListHeading, children: headingText })), loading ? (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, item: { grow: 1 }, children: _jsx(Progress, { as: StyledLoading, placement: 'inline' }) })) : (renderContent), (viewAllProps?.href || viewAllProps?.onClick) && !!items.length && !loading && (_jsx(StyledDrawerViewAll, { ...viewAllProps, as: viewAllProps.href ? 'a' : 'button', children: t('view_all') }))] }));
};
const AppShellList = ({ listView }) => {
    return (_jsx(Flex, { as: StyledAppShellListWrapper, container: { direction: 'column' }, children: listView.map(listItem => (_createElement(List, { ...listItem, key: listItem.id }))) }));
};
export default AppShellList;
//# sourceMappingURL=AppShellList.js.map