import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import { Select, MenuItem } from "@material-ui/core";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import { BaseDataControl } from "./BaseDataControl";
import { Draggable, Droppable, DragDropContext, } from "react-beautiful-dnd";
import { TextField, Collapse } from "@material-ui/core";
import { StyledFormControlForSwitch, StyledSwitch } from "../../CommonUI/PropertyEditing/PropertyEditorStyles";
import { PropertyEditorColor } from "../../CommonUI/PropertyEditing/PropertyEditorColor";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
};
export class BaseDataGridControl extends BaseDataControl {
    constructor() {
        super(...arguments);
        this.columnValues = [];
        this.dataGridMode = "Display";
        this.getDataDefinition = () => {
            const formContext = this.getFormContext();
            if (formContext) {
                const dataDefinition = formContext.form.inputData;
                if (dataDefinition) {
                    return typeof dataDefinition === "function" ? dataDefinition() : dataDefinition;
                }
            }
            return null;
        };
        this.getDataSetFields = () => {
            const dataDefinition = this.getDataDefinition();
            const fields = dataDefinition === null || dataDefinition === void 0 ? void 0 : dataDefinition.fields;
            const columnSet = [];
            if (fields) {
                for (let field of fields) {
                    if (field.list === true && field.type === "object") {
                        columnSet.push(field);
                    }
                }
            }
            return columnSet;
        };
        this.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;
        };
        this.onColumnDragEnd = (result) => {
            if (!result.destination) {
                return;
            }
            this.columnValues = reorder(this.columnValues, result.source.index, result.destination.index);
            StateManager.propertyChanged(this, "setColumnValue");
        };
        this.onSelectColumnSet = (e) => {
            const value = e.target.value;
            this.selectedColumnSet = parseInt(value);
            this.columnValues = this.getDataColumns().map((columnItem) => (Object.assign(Object.assign({}, columnItem), { headerName: columnItem.field, hide: false, isEditing: false, sortable: false, filterable: false, customHeader: false })));
            StateManager.propertyChanged(this, "setColumnValue");
        };
        this.changeColumnConfig = (value, columnIndex, configField) => {
            this.columnValues[columnIndex] = Object.assign(Object.assign({}, this.columnValues[columnIndex]), { [configField]: value });
            StateManager.propertyChanged(this, "setColumnValue");
        };
        this.toggleCollapse = (e, index) => {
            if (this.isEditing === index) {
                this.isEditing = -1;
            }
            else {
                this.isEditing = index;
            }
            StateManager.propertyChanged(this, "setColumnValue");
        };
        this.changeWidth = (event, columnInex) => {
            const { value } = event.target;
            this.columnValues[columnInex].width = parseInt(value);
            StateManager.propertyChanged(this, "setColumnValue");
        };
    }
    // produces part of the editor for label and name
    renderDataGridColumnControlEditor() {
        return (_jsx(ObserveState, { listenTo: this, properties: ["setColumnValue"], control: () => (_jsxs(_Fragment, { children: [_jsx(Select, Object.assign({ 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) => (_jsx(MenuItem, Object.assign({ value: index }, { children: columnSet.name }), columnSet.name))) }), void 0),
                    typeof this.selectedColumnSet !== "undefined" &&
                        this.getDataSetFields()[this.selectedColumnSet] != null && (_jsx(_Fragment, { children: _jsx(DragDropContext, Object.assign({ onDragEnd: this.onColumnDragEnd }, { children: _jsx(Droppable, Object.assign({ droppableId: "columnValueDrop" }, { children: (provided) => (_jsx("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef }, { children: this.columnValues.length > 0 &&
                                        this.columnValues.map((columnValue, index) => (_jsx(Draggable, Object.assign({ draggableId: columnValue.field, index: index }, { children: (provided, snapshot) => {
                                                return (_jsxs(_Fragment, { children: [_jsx(DragItemDiv, Object.assign({ ref: (node) => {
                                                                provided.innerRef(node);
                                                            } }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, (provided.draggableProps
                                                                .style || {})), { cursor: snapshot.isDragging
                                                                    ? "move"
                                                                    : "default" }), onClick: (e) => this.toggleCollapse(e, index) }, { children: columnValue.field }), void 0),
                                                        _jsxs(StyledCollapse, Object.assign({ in: this.isEditing === index }, { children: [_jsx(TextField, { variant: "outlined", label: "Header Name", onChange: (e) => this.changeColumnConfig(e.target.value, index, "headerName"), value: columnValue.headerName }, void 0),
                                                                _jsx(TextField, { type: "number", variant: "outlined", label: "Width", onChange: (e) => this.changeColumnConfig(e.target.value, index, "width"), value: columnValue.width }, void 0),
                                                                _jsx(StyledFormControlForSwitch, { control: _jsx(StyledSwitch, { name: "Sortable", color: "primary", checked: columnValue.sortable ||
                                                                            false, onChange: (e) => this.changeColumnConfig(e.target
                                                                            .checked, index, "sortable") }, void 0), label: "Sortable" }, void 0),
                                                                _jsx(StyledFormControlForSwitch, { control: _jsx(StyledSwitch, { name: "Filterable", color: "primary", checked: columnValue.filterable ||
                                                                            false, onChange: (e) => this.changeColumnConfig(e.target
                                                                            .checked, index, "filterable") }, void 0), label: "Filterable" }, void 0),
                                                                _jsx(StyledFormControlForSwitch, { control: _jsx(StyledSwitch, { name: "Include", color: "primary", checked: !columnValue.hide, onChange: (e) => this.changeColumnConfig(!e.target
                                                                            .checked, index, "hide") }, void 0), label: "Include" }, void 0),
                                                                _jsx(PropertyEditorBoolean, { editObject: columnValue, label: "Change header color and font", propertyName: "customHeader", updateCallback: this.controlUpdate }, void 0),
                                                                _jsxs(Collapse, Object.assign({ in: columnValue.customHeader }, { children: [_jsx(TextField, { type: "number", variant: "outlined", label: "Font Size", onChange: (e) => this.changeColumnConfig(e.target.value, index, "fontSize"), value: columnValue.fontSize }, void 0),
                                                                        _jsx(PropertyEditorColor, { label: "Font Color", editObject: columnValue, propertyName: "fontColor", name: "fontColor", updateCallback: this.controlUpdate }, void 0)] }), void 0)] }), void 0)] }, void 0));
                                            } }), columnValue.field))) }), void 0)) }), void 0) }), void 0) }, void 0))] }, void 0)) }, void 0));
    }
}
const DragItemDiv = styled.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 = styled(Collapse) `
    & > .MuiCollapse-wrapper {
        padding: 12px 4px;
        border: 2px solid #1d6295;
        border-radius: 4px;
        margin-bottom: 10px;
    }
`;
//# sourceMappingURL=BaseDataGridControl.js.map