"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataGridFormControlBase = 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 core_1 = require("@material-ui/core");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const DataFormControl_1 = require("./DataFormControl");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const PropertyEditorStyles_1 = require("../../CommonUI/PropertyEditing/PropertyEditorStyles");
const PropertyEditorColor_1 = require("../../CommonUI/PropertyEditing/PropertyEditorColor");
const PropertyEditorBoolean_1 = require("../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
};
class DataGridFormControlBase extends DataFormControl_1.DataFormControl {
    columnValues = [];
    selectedColumnSet;
    dataGridMode = "Display";
    selectedValueName;
    fontSize;
    fontColor;
    isEditing;
    getDataDefinition = () => {
        const formContext = this.getFormContext();
        if (formContext) {
            const dataDefinition = formContext.form.inputData;
            if (dataDefinition) {
                return typeof dataDefinition === "function" ? dataDefinition() : dataDefinition;
            }
        }
        return null;
    };
    getDataSetFields = () => {
        const dataDefinition = this.getDataDefinition();
        const fields = dataDefinition?.fields;
        const columnSet = [];
        if (fields) {
            for (let field of fields) {
                if (field.list === true && field.type === "object") {
                    columnSet.push(field);
                }
            }
        }
        return columnSet;
    };
    getDataColumns = () => {
        const columnDefs = [];
        if (typeof this.selectedColumnSet === "undefined") {
            return [];
        }
        const fieldSet = this.getDataSetFields()[this.selectedColumnSet];
        if (fieldSet && fieldSet.fields) {
            for (let field of fieldSet.fields) {
                if (field.list === false && field.type !== "object" && field.type !== "file")
                    columnDefs.push({
                        field: field.name,
                        type: field.type,
                    });
            }
        }
        return columnDefs;
    };
    onColumnDragEnd = (result) => {
        if (!result.destination) {
            return;
        }
        this.columnValues = reorder(this.columnValues, result.source.index, result.destination.index);
        StateManager_1.StateManager.propertyChanged(this, "setColumnValue");
    };
    onSelectColumnSet = (e) => {
        const value = e.target.value;
        this.selectedColumnSet = parseInt(value);
        this.columnValues = this.getDataColumns().map((columnItem) => ({
            ...columnItem,
            headerName: columnItem.field,
            hide: false,
            isEditing: false,
            sortable: false,
            filterable: false,
            customHeader: false,
        }));
        StateManager_1.StateManager.propertyChanged(this, "setColumnValue");
    };
    changeColumnConfig = (value, columnIndex, configField) => {
        this.columnValues[columnIndex] = {
            ...this.columnValues[columnIndex],
            [configField]: value,
        };
        StateManager_1.StateManager.propertyChanged(this, "setColumnValue");
    };
    toggleCollapse = (e, index) => {
        if (this.isEditing === index) {
            this.isEditing = -1;
        }
        else {
            this.isEditing = index;
        }
        StateManager_1.StateManager.propertyChanged(this, "setColumnValue");
    };
    changeWidth = (event, columnInex) => {
        const { value } = event.target;
        this.columnValues[columnInex].width = parseInt(value);
        StateManager_1.StateManager.propertyChanged(this, "setColumnValue");
    };
    // produces part of the editor for label and name
    renderDataGridColumnControlEditor() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["setColumnValue"], control: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.Select, { value: typeof this.selectedColumnSet === "undefined" ? -1 : this.selectedColumnSet, label: "Column Set", placeholder: "Select Column Set", onChange: this.onSelectColumnSet, variant: "outlined", children: this.getDataSetFields().map((columnSet, index) => ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: index, children: columnSet.name }, columnSet.name))) }), typeof this.selectedColumnSet !== "undefined" &&
                        this.getDataSetFields()[this.selectedColumnSet] != null && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onColumnDragEnd, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: "columnValueDrop", children: (provided) => ((0, jsx_runtime_1.jsx)("div", { ...provided.droppableProps, ref: provided.innerRef, children: this.columnValues.length > 0 &&
                                        this.columnValues.map((columnValue, index) => ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: columnValue.field, index: index, children: (provided, snapshot) => {
                                                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DragItemDiv, { ref: (node) => {
                                                                provided.innerRef(node);
                                                            }, ...provided.draggableProps, ...provided.dragHandleProps, style: {
                                                                ...(provided.draggableProps
                                                                    .style || {}),
                                                                cursor: snapshot.isDragging
                                                                    ? "move"
                                                                    : "default",
                                                            }, onClick: (e) => this.toggleCollapse(e, index), children: columnValue.field }), (0, jsx_runtime_1.jsxs)(StyledCollapse, { in: this.isEditing === index, children: [(0, jsx_runtime_1.jsx)(core_1.TextField, { variant: "outlined", label: "Header Name", onChange: (e) => this.changeColumnConfig(e.target.value, index, "headerName"), value: columnValue.headerName }), (0, jsx_runtime_1.jsx)(core_1.TextField, { type: "number", variant: "outlined", label: "Width", onChange: (e) => this.changeColumnConfig(e.target.value, index, "width"), value: columnValue.width }), (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledFormControlForSwitch, { control: (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledSwitch, { name: "Sortable", color: "primary", checked: columnValue.sortable ||
                                                                            false, onChange: (e) => this.changeColumnConfig(e.target
                                                                            .checked, index, "sortable") }), label: "Sortable" }), (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledFormControlForSwitch, { control: (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledSwitch, { name: "Filterable", color: "primary", checked: columnValue.filterable ||
                                                                            false, onChange: (e) => this.changeColumnConfig(e.target
                                                                            .checked, index, "filterable") }), label: "Filterable" }), (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledFormControlForSwitch, { control: (0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledSwitch, { name: "Include", color: "primary", checked: !columnValue.hide, onChange: (e) => this.changeColumnConfig(!e.target
                                                                            .checked, index, "hide") }), label: "Include" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: columnValue, label: "Change header color and font", propertyName: "customHeader", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: columnValue.customHeader, children: [(0, jsx_runtime_1.jsx)(core_1.TextField, { type: "number", variant: "outlined", label: "Font Size", onChange: (e) => this.changeColumnConfig(e.target.value, index, "fontSize"), value: columnValue.fontSize }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { label: "Font Color", editObject: columnValue, propertyName: "fontColor", name: "fontColor", updateCallback: this.controlUpdate })] })] })] }));
                                            } }, columnValue.field))) })) }) }) }))] })) }));
    }
    getStorageData() {
        let retData = super.getStorageData();
        DataUtilities_1.DataUtilities.addStorageData(this, retData, "columnValues", "selectedColumnSet", "dataGridMode", "selectedValueName", "fontSize", "fontColor");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "columnValues", "selectedColumnSet", "dataGridMode", "selectedValueName", "fontSize", "fontColor");
    }
}
exports.DataGridFormControlBase = DataGridFormControlBase;
const DragItemDiv = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid;
  border-radius: 4px;
  margin-bottom: 2px;
  border-color: #1d6295;
  padding: 8px 10px;
`;
const StyledCollapse = (0, styled_components_1.default)(core_1.Collapse) `
  & > .MuiCollapse-wrapper {
    padding: 12px 4px;
    border: 2px solid #1d6295;
    border-radius: 4px;
    margin-bottom: 10px;
  }
`;
//# sourceMappingURL=DataGridFormControlBase.js.map