"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DisplayModeValueEditor = exports.ListValueRender = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
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;
    }, "");
    if (renderValue === "") {
        renderValue = "items...";
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderValue, " ", requiredLength ? `... (${values.length})` : ``] }));
};
exports.ListValueRender = ListValueRender;
const DisplayModeValueEditor = ({ value, forData }) => {
    let valueStr = value !== null && value !== undefined ? `${value}` : "";
    if (valueStr === "") {
        valueStr = `${forData.name}...`;
    }
    return ((0, jsx_runtime_1.jsx)(StyledDisplayModeValueRender, { className: "ValueEditor-display", "data-testid": "ValueEditor-Display", isRightAlign: forData.type === DataTypes_1.DataTypes.NUMBER && !forData.list, children: Array.isArray(value) ? ((0, jsx_runtime_1.jsx)(exports.ListValueRender, { values: value })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: valueStr.length > 15 ? `${valueStr.slice(0, 15)}...` : valueStr })) }));
};
exports.DisplayModeValueEditor = DisplayModeValueEditor;
const StyledDisplayModeValueRender = styled_components_1.default.div `
    display: flex;
    align-items: center;

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