import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect } from 'react';
import styled, { css } from 'styled-components';
import { useBreakpoint, useConsolidatedRef, useI18n, usePrevious } from '../../hooks';
import Grid from '../Grid';
import { StyledLink } from '../Link';
import { getActiveElement, getFocusables } from '../../utils';
import Flex from '../Flex';
import Button from '../Button';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import { elipsisOverflow } from '../../styles/mixins';
import FileDisplay from './FileDisplay';
import FileItem from './FileItem';
export const StyledFileList = styled(Grid) `
  ${StyledLink} + ${StyledLink} {
    margin-inline-start: unset;
  }
`;
const StyledDownloadAllButton = styled.button(({ theme: { components: { text }, base: { 'font-size': fontSize, 'font-scale': fontScale, spacing } } }) => {
    const fontSizes = calculateFontSize(fontSize, fontScale);
    return css `
      font-size: ${fontSizes[text.secondary['font-size']]};
      ${elipsisOverflow}
      flex-shrink: 1;
      width: fit-content;
      margin-inline-start: calc(0.5 * ${spacing});
      margin-block-end: calc(0.5 * ${spacing});
    `;
});
StyledDownloadAllButton.defaultProps = defaultThemeProp;
const FileList = forwardRef(function FileList({ type, items, onDownloadAll, disabled = false, ...restProps }, ref) {
    const listRef = useConsolidatedRef(ref);
    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: listRef });
    const t = useI18n();
    const prevItems = usePrevious(items);
    const activeElementContained = listRef.current?.contains(getActiveElement());
    useEffect(() => {
        // Early exit when focus doesn't need to be grabbed
        if (items.length === 0 ||
            !activeElementContained ||
            listRef.current?.contains(getActiveElement())) {
            return;
        }
        prevItems?.forEach((item, oldIndex) => {
            const newIndex = items.findIndex(newItem => {
                return item.id === newItem.id;
            });
            if (newIndex === -1 && listRef.current) {
                if (oldIndex === prevItems.length - 1) {
                    // Move the focus to previous element when last element is removed
                    getFocusables(listRef.current.children[items.length - 1])[0]?.focus();
                }
                else {
                    // Otherwise, Move the focus to next element
                    getFocusables(listRef.current.children[oldIndex])[0]?.focus();
                }
            }
        });
    }, [items]);
    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Grid, { ...restProps, ref: listRef, container: { gap: 0.5, cols: isSmallOrAbove ? 'repeat(2, 1fr)' : '1fr' }, as: StyledFileList, children: type === 'display'
                    ? items.map(item => _jsx(FileDisplay, { ...item }, item.id))
                    : items.map(item => _jsx(FileItem, { ...item, disabled: disabled }, item.id)) }), onDownloadAll && items.length > 1 && (_jsx(Button, { as: StyledDownloadAllButton, onClick: onDownloadAll, variant: 'link', children: t('download_all') }))] }));
});
export default FileList;
//# sourceMappingURL=FileList.js.map