"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGridFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DataGridFormControlBase_1 = require("../DataGridFormControlBase");
const CommonStyled_1 = require("./CommonStyled");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const x_data_grid_1 = require("@mui/x-data-grid");
const core_1 = require("@material-ui/core");
const PropertyEditorText_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorText");
const PropertyEditorSelect_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorSelect");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
class XDataGridEditUI extends react_1.default.Component {
    render() {
        const gridOptions = ["Display", "Edit", "Select", "Select & Edit"];
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, label: "DataGrid Mode", propertyName: "dataGridMode", options: gridOptions, updateCallback: this.props.editMe.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.props.editMe.dataGridMode === "Select" ||
                        this.props.editMe.dataGridMode === "Select & Edit", children: (0, jsx_runtime_1.jsx)(PropertyEditorText_1.PropertyEditorText, { editObject: this.props.editMe, label: "Selected Value Name", propertyName: "selectedValueName", updateCallback: this.props.editMe.controlUpdate }) }), this.props.editMe.renderDataGridColumnControlEditor()] }));
    }
}
class DataGridFormControl extends DataGridFormControlBase_1.DataGridFormControlBase {
    dataGridMode = "Display";
    __type = "DataGrid";
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)("div", { "data-testid": this.valueName, children: this.columnValues.length > 0 && ((0, jsx_runtime_1.jsx)(DataGridContainer, { children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { style: UIStyleConstants_1.UIStyleConstantClasses.gridStyling, columns: this.getColumnSetting(), rows: this.getRows(), hideFooter: true, disableDensitySelector: true, onCellEditCommit: this.changeData, onRowClick: this.handleData }) })) })] }));
    }
    getColumnSetting = () => {
        for (const columnValue of this.columnValues) {
            if (this.dataGridMode === "Edit" || this.dataGridMode === "Select & Edit") {
                columnValue.editable = true;
            }
            columnValue.renderHeader = (params) => {
                return ((0, jsx_runtime_1.jsx)(StyledSpan, { fontColor: columnValue.fontColor, fontSize: columnValue.fontSize, children: params.colDef.headerName }));
            };
            columnValue.renderCell = (params) => {
                return ((0, jsx_runtime_1.jsx)(StyledSpan, { fontColor: columnValue.fontColor, fontSize: columnValue.fontSize, children: params.formattedValue }));
            };
        }
        return [
            {
                field: "id",
                hide: true,
                filterable: false,
                sortable: false,
            },
            ...this.columnValues,
        ];
    };
    changeData = (params) => {
        const { value, field, id } = params;
        if ((this.dataGridMode === "Edit" || this.dataGridMode === "Select & Edit") && this.valueName) {
            const baseData = this.getFormDataValue(this.valueName);
            baseData[id][field] = value;
            this.setFormDataValue(this.valueName, baseData);
        }
        if (this.dataGridMode === "Select & Edit" && this.selectedValueName) {
            const row = this.getFormDataValue(this.selectedValueName);
            row[field] = value;
            this.setFormDataValue(this.selectedValueName, row);
        }
    };
    handleData = (params) => {
        if ((this.dataGridMode === "Select" || this.dataGridMode === "Select & Edit") && this.selectedValueName) {
            const row = { ...params.row };
            delete row["id"];
            this.setFormDataValue(this.selectedValueName, row);
        }
    };
    getRows = () => {
        if (!this.valueName)
            return [];
        const formDataValue = this.getFormDataValue(this.valueName);
        if (formDataValue) {
            const gridRows = [];
            let id = 0;
            for (const rowItem of formDataValue) {
                gridRows.push({
                    id,
                    ...rowItem,
                });
                id++;
            }
            return gridRows;
        }
        else {
            return [];
        }
    };
    getAddedData() {
        if (!this.selectedValueName)
            return;
        let def = new ObjectDataDefinition_1.ObjectDataDefinition();
        def.name = this.selectedValueName;
        return def;
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XDataGridEditUI, { editMe: this });
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "dataGridMode", "__type");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "dataGridMode", "__type");
    }
}
exports.DataGridFormControl = DataGridFormControl;
const DataGridContainer = styled_components_1.default.div `
    width: 100%;
    min-height: 400px;
    height: 400px;
`;
const StyledSpan = styled_components_1.default.span `
    color: ${(prop) => (prop.fontColor ? prop.fontColor : "rgba(0, 0, 0, 0.87)")};
    font-size: ${(prop) => (prop.fontSize ? prop.fontSize + "px" : "0.875rem")};
`;
//# sourceMappingURL=DataGridFormControl.js.map