import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import styled from "styled-components";
import { XDataType } from "../../Common/Data/XDataType";
export const ListValueRender = ({ values, length = 15 }) => {
    let requiredLength = false;
    let renderValue = values.reduce((s, current, index) => {
        if (index === 0)
            return `${current}`;
        if (`${s}, ${current}`.length > length) {
            requiredLength = true;
            return s;
        }
        s = `${s}, ${current}`;
        return s;
    }, "");
    return (_jsxs(_Fragment, { children: [renderValue, " ", requiredLength ? `... (${values.length})` : ``] }, void 0));
};
export const DisplayModeValueEditor = ({ value, forData }) => {
    let valueStr = value !== null && value !== undefined ? `${value}` : "";
    return (_jsx(StyledDisplayModeValueRender, Object.assign({ className: "ValueEditor-display", "data-testid": "ValueEditor-Display", isRightAlign: forData.type === XDataType.NUMBER && !forData.list }, { children: Array.isArray(value) ? (_jsx(ListValueRender, { values: value }, void 0)) : (_jsx(_Fragment, { children: valueStr.length > 15 ? `${valueStr.slice(0, 15)}...` : valueStr }, void 0)) }), void 0));
};
const StyledDisplayModeValueRender = styled.div `
    display: flex;
    align-items: center;

    ${(props) => props.isRightAlign
    ? `
                justify-content: flex-end;
                width: 100%;
            `
    : ""}
`;
//# sourceMappingURL=DisplayModeRender.js.map