import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import Grid from '../Grid';
import { StyledLabel } from '../Label';
import { useBreakpoint, useConsolidatedRef, useTestIds, useTheme } from '../../hooks';
import { defaultThemeProp } from '../../theme';
import ShowMoreLess from '../ShowMoreLess';
import { withTestIds } from '../../utils';
import NoValue from '../NoValue/NoValue';
import { getFieldValueListTestIds, getFieldValueItemTestIds } from './FieldValueList.test-ids';
export const StyledFieldName = styled.dt `
  word-break: break-word;
`;
export const StyledFieldValue = styled.dd `
  word-break: break-word;
`;
export const StyledStackedFieldValue = styled.div ``;
export const StyledFieldValueList = styled.dl(({ variant, theme }) => {
    const { components: { 'field-value-list': { inline: { detached } } } } = theme;
    return css `
    width: 100%;

    ${variant === 'value-comparison' &&
        css `
      dt {
        width: 100%;
      }
      dd {
        text-align: end;
        padding-inline-start: calc(2 * ${theme.base.spacing});
      }
      ${StyledLabel} {
        max-width: unset;
      }
      dd:not(:last-of-type),
      dt:not(:last-of-type) {
        border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
        padding-bottom: calc(0.5 * ${theme.base.spacing});
      }
    `}

    ${detached &&
        variant === 'inline' &&
        css `
      dt {
        width: 100%;
        padding-inline-end: calc(${theme.base.spacing});
      }
      ${StyledLabel} {
        max-width: unset;
      }
      dd:not(:last-of-type),
      dt:not(:last-of-type),
      dd:has(+ ${StyledStackedFieldValue}),
      dt:has(+ dd + ${StyledStackedFieldValue}),
      ${StyledStackedFieldValue}:has(+ dt + dd),
      ${StyledStackedFieldValue}:not(:last-of-type) {
        border-bottom: 0.0625rem dashed ${theme.base.palette['border-line']};
        padding-bottom: calc(0.5 * ${theme.base.spacing});
      }
    `}
  `;
});
StyledFieldValueList.defaultProps = defaultThemeProp;
export const FieldValueItem = withTestIds(({ testId, name, value, variant = 'inline', truncate = true }) => {
    const testIds = useTestIds(testId, getFieldValueItemTestIds);
    const displayValue = typeof value === 'string' && truncate ? (_jsx(ShowMoreLess, { lines: 3, children: value })) : (value);
    const labelAndValue = (_jsxs(_Fragment, { children: [_jsx(StyledLabel, { "data-testid": testIds.name, as: StyledFieldName, role: 'none', children: name }), _jsx(StyledFieldValue, { "data-testid": testIds.value, role: 'none', children: value ? displayValue : _jsx(NoValue, {}) })] }));
    return variant === 'stacked' ? (_jsx(StyledStackedFieldValue, { "data-testid": testIds.root, children: labelAndValue })) : (_jsx(_Fragment, { children: labelAndValue }));
}, getFieldValueItemTestIds);
const FieldValueList = forwardRef(function FieldValueList({ testId, fields, variant = 'inline', ...restProps }, ref) {
    const testIds = useTestIds(testId, getFieldValueListTestIds);
    const fieldValueListRef = useConsolidatedRef(ref);
    const isXSContentWidthOrAbove = useBreakpoint('xs', {
        breakpointRef: fieldValueListRef,
        themeProp: 'content-width'
    });
    const { components: { 'field-value-list': { inline: { detached } } } } = useTheme();
    return (_jsx(Grid, { "data-testid": testIds.root, ...restProps, ref: fieldValueListRef, container: {
            cols: ['inline', 'value-comparison'].includes(variant) && isXSContentWidthOrAbove
                ? '16ch minmax(0, 1fr)'
                : 'minmax(0, 1fr)',
            colGap: !detached && variant !== 'value-comparison' ? 2 : 0,
            rowGap: !detached && variant !== 'value-comparison' ? 1 : 0.5
        }, as: StyledFieldValueList, role: 'none', variant: isXSContentWidthOrAbove ? variant : 'stacked', children: fields.map(({ id, name, value, truncate = true, variant: fieldVariant }) => {
            const sharedProps = {
                name,
                variant: (fieldVariant ?? variant) === 'stacked' || !isXSContentWidthOrAbove
                    ? 'stacked'
                    : 'inline'
            };
            if (typeof value === 'string') {
                return (_jsx(FieldValueItem, { ...sharedProps, value: value, truncate: truncate }, id ?? name));
            }
            return _jsx(FieldValueItem, { ...sharedProps, value: value }, id ?? name);
        }) }));
});
export default withTestIds(FieldValueList, getFieldValueListTestIds);
//# sourceMappingURL=FieldValueList.js.map