"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectListEditor = exports.EditModeObjectValueEditor = exports.DisplayModeObjectValueEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataTypes_1 = require("@appglue/common/dist/Common/Data/DataTypes");
const Link_1 = require("../BuilderUI/Link");
const DeleteGrayIcon_1 = require("../Icon/DeleteGrayIcon");
const Boolean_1 = require("./Boolean");
const Date_1 = require("./Date");
const DesignUI_1 = require("./DesignUI");
const Number_1 = require("./Number");
const String_1 = require("./String");
const ObjectListValueRender = ({ forData, length = 15, values, }) => {
    let requiredLength = false;
    let renderValue = "";
    let v = values[0] || {};
    renderValue += forData.fields.reduce((s, current, idx) => {
        const fieldValue = typeof v === "object" ? v[current.name] : current.name;
        if (idx === 0)
            return `${fieldValue}`;
        if (`${s}, ${fieldValue}`.length > length) {
            requiredLength = true;
            return s;
        }
        s = `${s}, ${fieldValue}`;
        return s;
    }, "");
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderValue, " ", requiredLength ? `... (${values.length})` : ``] }));
};
const DisplayModeObjectValueEditor = ({ value, forData }) => {
    return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-Object-Display", children: Array.isArray(value) ? ((0, jsx_runtime_1.jsx)(ObjectListValueRender, { forData: forData, values: value })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (forData.fields || []).reduce((s, current, idx) => {
                const fieldValue = value && typeof value === "object" ? Reflect.get(value || {}, current.name) : null;
                let renderValue = "";
                if (current.list) {
                    renderValue =
                        fieldValue && Array.isArray(fieldValue) && fieldValue.length
                            ? `${typeof fieldValue[0] === "object" ? current.name : fieldValue[0]}(${fieldValue.length})`
                            : `(0)`;
                }
                else {
                    renderValue = `${typeof fieldValue === "object" ? current.name : fieldValue || ""}`;
                }
                if (idx === 0) {
                    return renderValue;
                }
                return `${s}, ${renderValue}`;
            }, "") })) }));
};
exports.DisplayModeObjectValueEditor = DisplayModeObjectValueEditor;
exports.EditModeObjectValueEditor = react_1.default.forwardRef(
// eslint-disable-next-line
({ value, forData, onUpdate, editMode, showFieldName = true }, ref) => {
    if (forData.list) {
        return ((0, jsx_runtime_1.jsx)(exports.ObjectListEditor, { values: value, updateCallback: onUpdate, forData: forData, showFieldName: showFieldName }));
    }
    let values = forData.list
        ? Array.isArray(value) && typeof value !== "string"
            ? value
            : value
                ? [value]
                : []
        : Array.isArray(value) && typeof value !== "string"
            ? value[0]
            : value;
    const onFieldValueUpdate = (newValue, fieldName) => {
        const originalValue = typeof values === "object" ? { ...values } : {};
        let newValues = {
            ...originalValue,
            [fieldName]: newValue,
        };
        onUpdate(newValues);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-Object-Edit", children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (forData.fields || []).map((field, idx) => ((0, jsx_runtime_1.jsxs)(SubfieldEditorRender, { children: [showFieldName && (0, jsx_runtime_1.jsx)(DesignUI_1.FieldNameRender, { children: field.name }), (0, jsx_runtime_1.jsx)(SubfieldEditor, { forData: field, value: values && typeof values === "object" ? Reflect.get(values || {}, field.name) : null, showFieldName: showFieldName, onUpdate: (newValue) => {
                            onFieldValueUpdate(newValue, field.name);
                        }, editMode: editMode }, idx)] }, idx))) }) }));
});
const ObjectListEditor = (props) => {
    let values = [];
    if (Array.isArray(props.values)) {
        values = props.values;
    }
    const [viewDetails, setViewDetails] = (0, react_1.useState)({});
    const onUpdate = (newValue, fieldName, index) => {
        let newValues = [
            ...values.map((v, idx) => {
                if (index !== idx)
                    return v;
                return {
                    ...(typeof v === "object" ? v : {}),
                    [fieldName]: newValue,
                };
            }),
        ];
        props.updateCallback([...newValues]);
    };
    const onViewDetails = (index) => {
        setViewDetails({
            ...viewDetails,
            [`v_${index}`]: !viewDetails[`v_${index}`],
        });
    };
    const add = () => {
        props.updateCallback([...values, {}]);
    };
    const remove = (index) => {
        let tempValues = [...values];
        tempValues.splice(index, 1);
        props.updateCallback([...tempValues]);
    };
    return ((0, jsx_runtime_1.jsx)(StyledObjectList, { className: "PropertyList-Wrapper ObjectList-Wrapper", "data-testid": "ValueEditor-ObjectList-Edit", children: (0, jsx_runtime_1.jsx)(core_1.TableContainer, { children: (0, jsx_runtime_1.jsxs)(core_1.Table, { size: "small", stickyHeader: true, children: [(0, jsx_runtime_1.jsx)(core_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(core_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(core_1.TableCell, {}), props.forData.fields.map((f, idx) => {
                                    return ((0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(DesignUI_1.FieldNameRender, { className: "headerColumn-title", children: f.name }) }, idx));
                                }), (0, jsx_runtime_1.jsx)(core_1.TableCell, {})] }) }), (0, jsx_runtime_1.jsxs)(core_1.TableBody, { children: [values.map((v, idx) => {
                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(core_1.TableCell, { children: idx + 1 }), props.forData.fields.map((field, idx2) => ((0, jsx_runtime_1.jsx)(core_1.TableCell, { children: (0, jsx_runtime_1.jsx)(SubfieldEditor, { forData: field, value: Reflect.get(v || {}, field.name), onUpdate: (newValue) => onUpdate(newValue, field.name, idx), editMode: "inline", subfield: true, onViewDetails: () => onViewDetails(idx), show: viewDetails[`v_${idx}`], showFieldName: props.showFieldName }) }, idx2))), (0, jsx_runtime_1.jsx)(core_1.TableCell, { onClick: () => remove(idx), "data-testid": `BtnRemove${props.forData.name}`, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) })] }), viewDetails[`v_${idx}`] && ((0, jsx_runtime_1.jsx)(core_1.TableRow, { children: (0, jsx_runtime_1.jsx)(core_1.TableCell, { colSpan: props.forData.fields.length + 2, classes: {
                                                    root: "ObjectListTableCell-details",
                                                }, children: props.forData.fields
                                                    .filter((field) => field.type === DataTypes_1.DataTypes.OBJECT)
                                                    .map((field, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DesignUI_1.FieldNameRender, { className: "ValueEditor-fieldLabel", children: field.name }), (0, jsx_runtime_1.jsx)(SubfieldEditor, { forData: field, value: Reflect.get(v || {}, field.name), onUpdate: (newValue) => onUpdate(newValue, field.name, idx), showFieldName: props.showFieldName, editMode: "inline" })] }, index))) }) }))] }, idx));
                            }), (0, jsx_runtime_1.jsx)(core_1.TableRow, { children: (0, jsx_runtime_1.jsx)(core_1.TableCell, { colSpan: props.forData.fields.length + 2, children: (0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: add, color: "primary", classes: { root: "PropertyList-Add" }, "data-testid": `BtnAdd${props.forData.name}`, children: "Add" }) }) })] })] }) }) }));
};
exports.ObjectListEditor = ObjectListEditor;
const SubfieldEditor = react_1.default.forwardRef((props, ref) => {
    switch (props.forData.type) {
        case DataTypes_1.DataTypes.BOOLEAN:
            return (0, jsx_runtime_1.jsx)(Boolean_1.EditModeBooleanValueEditor, { ...props, ref: ref });
        case DataTypes_1.DataTypes.STRING:
            return (0, jsx_runtime_1.jsx)(String_1.EditModeStringValueEditor, { ...props, ref: ref });
        case DataTypes_1.DataTypes.DATE:
            return (0, jsx_runtime_1.jsx)(Date_1.EditModeDateValueEditor, { ...props, ref: ref });
        case DataTypes_1.DataTypes.NUMBER:
            return (0, jsx_runtime_1.jsx)(Number_1.EditModeNumberValueEditor, { ...props, ref: ref });
        case DataTypes_1.DataTypes.FILE:
            return null;
        case DataTypes_1.DataTypes.OBJECT:
            return props.subfield ? ((0, jsx_runtime_1.jsx)(ViewDetailsButton, { onClick: props.onViewDetails, children: !props.show ? "show details" : "hide details" })) : ((0, jsx_runtime_1.jsx)(exports.EditModeObjectValueEditor, { ...props, ref: ref }));
        default:
            return null;
    }
});
const StyledObjectList = (0, styled_components_1.default)(core_1.Paper) `
    min-width: 600px;
    overflow: auto;

    text-align: right;
    margin: 20px 0;

    .ObjectListTableCell-details {
        padding: 20px;
    }

    .headerColumn-title {
        justify-content: center;
    }
`;
const ViewDetailsButton = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;
`;
const SubfieldEditorRender = styled_components_1.default.div `
    padding: 5px 0;
`;
//# sourceMappingURL=Object.js.map