import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import styled, { css } from 'styled-components';
import Actions from '../Actions';
import Flex from '../Flex';
import Text from '../Text';
import Count from '../Badges/Count';
import Icon from '../Icon';
import Card, { CardHeader, CardContent, CardFooter, StyledCard } from '../Card';
import EmptyState from '../EmptyState';
import { omitProps } from '../../styles';
import { useI18n } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import SummaryItem from '../SummaryItem';
import Progress from '../Progress';
import Button from '../Button';
import ErrorState from '../ErrorState';
import { StyledCardFooter } from '../Card/CardFooter';
export const StyledSummaryListHeader = styled(CardHeader)(({ theme }) => css `
    &:not(${StyledCard} ${StyledCard} > &) {
      padding-block-end: calc(${theme.base.spacing} / 2);
    }
  `);
StyledSummaryListHeader.defaultProps = defaultThemeProp;
export const StyledSummaryListContent = styled(CardContent).withConfig(omitProps('loading'))(({ theme, loading }) => css `
    ${loading &&
    css `
      min-height: 4rem;
    `}

    &:not(:last-child) > ul > li:last-child {
      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
    }

    &:not(${StyledCard} ${StyledCard} > &) {
      padding-block-end: calc(${theme.base.spacing} / 2);

      & + ${StyledCardFooter} {
        padding-block-start: ${theme.base.spacing};
      }
    }
  `);
StyledSummaryListContent.defaultProps = defaultThemeProp;
export const StyledSummaryListItem = styled(SummaryItem)(({ theme }) => css `
    padding-block: ${theme.base.spacing};

    &:not(:last-child) {
      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
    }
  `);
StyledSummaryListItem.defaultProps = defaultThemeProp;
export const SummaryListItems = ({ name, items }) => {
    const t = useI18n();
    return (_jsx("ul", { children: items.map(({ id, actions: itemActions, contextualLabel, ...restItemProps }) => {
            return (_jsx(StyledSummaryListItem, { ...restItemProps, forwardedAs: 'li', actions: itemActions && (_jsx(Actions, { items: itemActions, contextualLabel: name && contextualLabel
                        ? t('action_from_summarylist_heading', [contextualLabel, name])
                        : contextualLabel })) }, id));
        }) }));
};
const SummaryList = forwardRef(function SummaryList({ icon, name, headingTag = 'h2', count, actions, items, onViewAll, loading, noItemsText, error, ...restProps }, ref) {
    const t = useI18n();
    const content = useMemo(() => {
        if (loading) {
            return (_jsx(Progress, { placement: 'local', message: typeof loading === 'string' ? loading : undefined }));
        }
        if (error) {
            return _jsx(ErrorState, { ...(error === true ? {} : error) });
        }
        return items.length > 0 ? (_jsx(SummaryListItems, { name: name, items: items })) : (_jsx(EmptyState, { message: noItemsText }));
    }, [loading, items, noItemsText, error]);
    return (_jsxs(Card, { ref: ref, ...restProps, children: [(icon || name || typeof count === 'number' || actions) && (_jsxs(StyledSummaryListHeader, { children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [icon && _jsx(Icon, { name: icon }), name && _jsx(Text, { variant: headingTag, children: name }), typeof count === 'number' && _jsx(Count, { children: count })] }), actions && _jsx(Actions, { items: actions, contextualLabel: name })] })), _jsx(StyledSummaryListContent, { loading: loading, children: content }), !error && typeof count === 'number' && count > items.length && onViewAll && (_jsx(CardFooter, { justify: 'center', children: _jsx(Button, { variant: 'link', "aria-label": name ? t('view_all_noun', [name.toLowerCase()]) : t('view_all'), onClick: onViewAll, children: t('view_all') }) }))] }));
});
export default SummaryList;
//# sourceMappingURL=SummaryList.js.map