import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components';
import Button from '../Button';
import Icon, { registerIcon } from '../Icon';
import * as plusIcon from '../Icon/icons/plus.icon';
import { useI18n } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import { getActiveElement, getFocusables } from '../../utils';
import FieldGroup, { StyledFieldGroup } from './FieldGroup';
registerIcon(plusIcon);
const StyledFieldGroupList = styled.div(({ theme }) => css `
    margin-block-start: ${theme.base.spacing};

    ${StyledFieldGroup} {
      margin-block-start: 0;
    }
  `);
StyledFieldGroupList.defaultProps = defaultThemeProp;
export const StyledListItem = styled(FieldGroup)(({ theme }) => css `
    padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});

    &:not(:last-of-type) {
      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
      margin-block-end: calc(2 * ${theme.base.spacing});
    }

    legend {
      margin-block-end: 0;
    }
  `);
StyledListItem.defaultProps = defaultThemeProp;
const StyledAddButton = styled(Button)(({ theme }) => css `
    margin-top: ${theme.base.spacing};
  `);
StyledAddButton.defaultProps = defaultThemeProp;
const FieldGroupList = forwardRef(function FieldGroupList({ items, onAdd, onDelete, contextualLabel, ...restProps }, ref) {
    const t = useI18n();
    const lastItemRef = useRef(null);
    const addBtnRef = useRef(null);
    useEffect(() => {
        const currentActiveEl = getActiveElement();
        if (currentActiveEl === addBtnRef.current && lastItemRef.current) {
            const groupItemLegend = lastItemRef.current.querySelector(':scope > legend');
            const focusables = getFocusables(lastItemRef.current);
            const groupActionButtons = focusables.filter(focusable => groupItemLegend?.contains(focusable));
            const groupContentFocusables = focusables.filter(focusable => !groupItemLegend?.contains(focusable));
            if (groupContentFocusables.length > 0) {
                groupContentFocusables[0].focus();
            }
            else {
                groupActionButtons[0]?.focus();
            }
        }
    }, [items.length]);
    return (_jsxs(StyledFieldGroupList, { ref: ref, ...restProps, children: [items.map(({ id, children, name, headingTag, onDelete: itemOnDelete, ...restItemProps }, index) => {
                const isLastItem = index === items.length - 1;
                return (_jsx(StyledListItem, { name: name, headingTag: headingTag, ...restItemProps, actions: onDelete || itemOnDelete
                        ? [
                            {
                                id: 'delete',
                                text: t('delete'),
                                icon: 'trash',
                                iconOnly: true,
                                onClick: () => {
                                    itemOnDelete?.(id);
                                    onDelete?.(id);
                                }
                            }
                        ]
                        : undefined, ref: isLastItem ? lastItemRef : undefined, children: children }, id));
            }), onAdd && (_jsxs(StyledAddButton, { variant: 'link', onClick: onAdd, ref: addBtnRef, children: [_jsx(Icon, { name: 'plus' }), contextualLabel ? t('add_noun', [contextualLabel]) : t('add')] }))] }));
});
export default FieldGroupList;
//# sourceMappingURL=FieldGroupList.js.map