import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { BaseDataGridControl } from "./BaseDataGridControl";
import { StyledInputLabel } from "./XCommonStyled";
import { ObjectDataDefinition } from "../../Common/Data/Definitions/ObjectDataDefinition";
import { DataGrid } from "@mui/x-data-grid";
import { Collapse } from "@material-ui/core";
import { PropertyEditorText } from "../../CommonUI/PropertyEditing/PropertyEditorText";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
class XDataGridEditUI extends React.Component {
    render() {
        const gridOptions = ["Display", "Edit", "Select", "Select & Edit"];
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorSelect, { editObject: this.props.editMe, label: "DataGrid Mode", propertyName: "dataGridMode", options: gridOptions, updateCallback: this.props.editMe.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.props.editMe.dataGridMode === "Select" ||
                        this.props.editMe.dataGridMode === "Select & Edit" }, { children: _jsx(PropertyEditorText, { editObject: this.props.editMe, label: "Selected Value Name", propertyName: "selectedValueName", updateCallback: this.props.editMe.controlUpdate }, void 0) }), void 0), this.props.editMe.renderDataGridColumnControlEditor()] }, void 0));
    }
}
export class XDataGrid extends BaseDataGridControl {
    constructor() {
        super(...arguments);
        this.dataGridMode = "Display";
        this.getColumnSetting = () => {
            for (const columnValue of this.columnValues) {
                if (this.dataGridMode === "Edit" || this.dataGridMode === "Select & Edit") {
                    columnValue.editable = true;
                }
                columnValue.renderHeader = (params) => {
                    return (_jsx(StyledSpan, Object.assign({ fontColor: columnValue.fontColor, fontSize: columnValue.fontSize }, { children: params.colDef.headerName }), void 0));
                };
                columnValue.renderCell = (params) => {
                    return (_jsx(StyledSpan, Object.assign({ fontColor: columnValue.fontColor, fontSize: columnValue.fontSize }, { children: params.formattedValue }), void 0));
                };
            }
            return [
                {
                    field: "id",
                    hide: true,
                    filterable: false,
                    sortable: false,
                },
                ...this.columnValues,
            ];
        };
        this.changeData = (params, event) => {
            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);
            }
        };
        this.handleData = (params, event, details) => {
            if ((this.dataGridMode === "Select" || this.dataGridMode === "Select & Edit") && this.selectedValueName) {
                const row = Object.assign({}, params.row);
                delete row["id"];
                this.setFormDataValue(this.selectedValueName, row);
            }
        };
        this.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(Object.assign({ id }, rowItem));
                    id++;
                }
                return gridRows;
            }
            else {
                return [];
            }
        };
    }
    render() {
        return (_jsxs(_Fragment, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                _jsx("div", Object.assign({ "data-testid": this.valueName }, { children: this.columnValues.length > 0 && (_jsx(DataGridContainer, { children: _jsx(DataGrid, { columns: this.getColumnSetting(), rows: this.getRows(), hideFooter: true, disableDensitySelector: true, onCellEditCommit: this.changeData, onRowClick: this.handleData }, void 0) }, void 0)) }), void 0)] }, void 0));
    }
    getAddedData() {
        if (!this.selectedValueName)
            return;
        let def = new ObjectDataDefinition();
        def.name = this.selectedValueName;
        return def;
    }
    renderEditUI() {
        return _jsx(XDataGridEditUI, { editMe: this }, void 0);
    }
}
const DataGridContainer = styled.div `
    width: 100%;
    min-height: 400px;
    height: 400px;
`;
const StyledSpan = styled.span `
    color: ${(prop) => (prop.fontColor ? prop.fontColor : "rgba(0, 0, 0, 0.87)")};
    font-size: ${(prop) => (prop.fontSize ? prop.fontSize + "px" : "0.875rem")};
`;
//# sourceMappingURL=XDataGrid.js.map