import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState } from 'react';
import styled, { css } from 'styled-components';
import Actions from '../Actions';
import Flex from '../Flex';
import EmptyState from '../EmptyState';
import SearchInput, { StyledSearchInput } from '../SearchInput';
import { defaultThemeProp } from '../../theme';
import Progress from '../Progress';
import { StyledCard } from '../Card';
import { StyledCardContent } from '../Card/CardContent';
import { omitProps } from '../../styles';
import { usePrevious, useI18n } from '../../hooks';
import SummaryList from './SummaryList';
const StyledToolbar = styled.div(({ theme: { base } }) => {
    return css `
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: ${base.palette['primary-background']};
    margin-bottom: ${base.spacing};
    transform: translateY(calc(-0.5 * ${base.spacing}));
    padding: ${base.spacing} 0;

    ${StyledSearchInput} {
      flex-grow: 1;
    }
  `;
});
StyledToolbar.defaultProps = defaultThemeProp;
export const StyledViewAll = styled.div.withConfig(omitProps('loading'))(({ loading }) => css `
    ${StyledCardContent}:not(${StyledCard} ${StyledCard} > ${StyledCardContent}) {
      padding: 0;
    }

    ${loading &&
    css `
      min-height: 8rem;
    `}
  `);
const SearchableList = forwardRef(function SearchableList({ name, loading, actions, items, searchInputProps, deletedItemId, onDeleteFocusComplete, fallbackFocusRef, ...restProps }, ref) {
    const t = useI18n();
    const [searchValue, setSearchValue] = useState('');
    const prevItemsLength = usePrevious(items.length);
    const hasProcessedEmptyRef = useRef(false);
    const toolbarActionsRef = useRef(null);
    useEffect(() => {
        if (!deletedItemId) {
            hasProcessedEmptyRef.current = false;
            return;
        }
        if (hasProcessedEmptyRef.current)
            return;
        if (items.length === 0 && (prevItemsLength ?? 0) > 0) {
            hasProcessedEmptyRef.current = true;
            const el = fallbackFocusRef?.current ?? toolbarActionsRef.current;
            el?.focus();
            onDeleteFocusComplete?.();
        }
    }, [deletedItemId, items.length]);
    return (_jsxs(StyledViewAll, { ref: ref, loading: loading, ...restProps, children: [!loading && (searchInputProps || actions) && (_jsxs(Flex, { container: { justify: 'between', alignItems: 'center', gap: 2 }, as: StyledToolbar, children: [searchInputProps && (_jsx(Flex, { container: { alignItems: 'center', gap: 1 }, item: { grow: 1 }, children: _jsx(SearchInput, { onSearchChange: val => {
                                searchInputProps.onSearchChange?.(val);
                                setSearchValue(val);
                            }, searchInputAriaLabel: name ? t('search_noun', [name]) : t('search'), value: searchInputProps.value || searchValue }) })), actions && (_jsx(Actions, { ref: toolbarActionsRef, contextualLabel: name, iconOnly: false, items: actions }))] })), loading && _jsx(Progress, { placement: 'local' }), !loading &&
                (items.length ? (_jsx(SummaryList, { name: name, items: items, deletedItemId: deletedItemId, onDeleteFocusComplete: onDeleteFocusComplete, fallbackFocusRef: fallbackFocusRef, hideHeader: true })) : (_jsx(EmptyState, {})))] }));
});
export default SearchableList;
//# sourceMappingURL=ViewAll.js.map