import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import Grid from '../Grid';
import { defaultThemeProp } from '../../theme';
import { StyledProgressRing } from '../Progress';
import { useTestIds } from '../../hooks';
import { withTestIds } from '../../utils';
import { getSummaryItemTestIds } from './SummaryItem.test-ids';
export const StyledVisual = styled.div `
  > ${StyledProgressRing}, img {
    display: block;
    object-fit: cover;
    width: 2rem;
    height: 2rem;
  }
`;
StyledVisual.defaultProps = defaultThemeProp;
export const StyledPrimary = styled(Grid)(({ theme, isString, overflowStrategy }) => {
    return css `
    ${overflowStrategy === 'ellipsis'
        ? css `
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        `
        : css `
          word-break: break-word;
        `}

    ${isString &&
        css `
      font-weight: ${theme.base['font-weight']['semi-bold']};
    `}
  `;
});
StyledPrimary.defaultProps = defaultThemeProp;
export const StyledSecondary = styled(Grid)(({ overflowStrategy }) => {
    return css `
    ${overflowStrategy === 'ellipsis'
        ? css `
          overflow: hidden;
          text-overflow: ellipsis;
        `
        : css `
          word-break: break-word;
        `}
  `;
});
export const StyledSummaryItemActions = styled.div `
  white-space: nowrap;
`;
export const StyledSummaryItem = styled.div ``;
const getColumns = ({ visual, actions }) => {
    return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;
};
const getAreas = ({ secondary, layout, visual, actions }) => {
    return `"${visual ? 'visual ' : ''}primary${secondary && layout === 'inline' ? ' secondary' : ''}${actions ? ' actions' : ''}"${secondary && layout === 'stacked'
        ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"`
        : ''}`;
};
const SummaryItem = forwardRef(function SummaryItem({ testId, visual, primary, secondary, layout = 'stacked', actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) {
    const testIds = useTestIds(testId, getSummaryItemTestIds);
    return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, ref: ref, container: {
            cols: getColumns({ visual, actions }),
            colGap: 2,
            areas: getAreas({ secondary, layout, visual, actions }),
            ...container
        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { "data-testid": testIds.visual, as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual })), _jsx(StyledPrimary, { "data-testid": testIds.primary, item: {
                    area: 'primary',
                    alignSelf: secondary && layout === 'stacked' ? 'end' : 'center'
                }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }), secondary && (_jsx(StyledSecondary, { "data-testid": testIds.secondary, item: {
                    area: 'secondary',
                    alignSelf: layout === 'stacked' ? 'start' : 'center'
                }, overflowStrategy: overflowStrategy, children: secondary })), actions && (_jsx(Grid, { "data-testid": testIds.actions, as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }))] }));
});
export default withTestIds(SummaryItem, getSummaryItemTestIds);
//# sourceMappingURL=SummaryItem.js.map