import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Typography, Collapse, Switch, FormControlLabel, Menu } from "@material-ui/core";
import { useState } from "react";
import styled from "styled-components";
import { XDataDefinition } from "../../Common/Data/XDataDefinition";
import { XDataType } from "../../Common/Data/XDataType";
import { Layer } from "../Components/Layer";
import { PropertyEditorBoolean } from "../PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorDate } from "../PropertyEditing/PropertyEditorDate";
import { PropertyEditorInteger } from "../PropertyEditing/PropertyEditorInteger";
import { PropertyEditorText } from "../PropertyEditing/PropertyEditorText";
import { PropertyEditorTextList } from "../PropertyEditing/PropertyEditorTextList";
import { XDefinitionEditor } from "./XDefinitionEditor";
export const DataDefEditLayer = (_a) => {
    var { dataDef, onUpdate, onClose } = _a, extra = __rest(_a, ["dataDef", "onUpdate", "onClose"]);
    const updateCallback = () => {
        onUpdate();
    };
    let content = null;
    let newDef = new XDataDefinition();
    switch (dataDef.type) {
        case XDataType.STRING:
            content = (_jsx(StringDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }, void 0));
            break;
        case XDataType.DATE:
            content = (_jsx(DateDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }, void 0));
            break;
        case XDataType.NUMBER:
            content = (_jsx(NumberDataDefEditProperties, { dataDef: dataDef, updateCallback: updateCallback }, void 0));
            break;
        case XDataType.FILE:
            return null;
        case XDataType.OBJECT:
            newDef.fields = Reflect.get(dataDef, "fields");
            content = _jsx(XDefinitionEditor, { definition: newDef }, void 0);
            break;
        default:
            content = _jsx("div", { children: "Select type" }, void 0);
    }
    if (dataDef.type === XDataType.OBJECT) {
        return (_jsx(Layer, { maxWidth: false, open: extra.open, renderUI: () => {
                return (_jsxs(_Fragment, { children: [_jsxs(Typography, Object.assign({ align: "center", variant: "h5" }, { children: [dataDef.name, " [", dataDef.type, "]"] }), void 0), content, _jsx("div", Object.assign({ style: { textAlign: "right" } }, { children: _jsx(Button, Object.assign({ onClick: (event) => {
                                    event.stopPropagation();
                                    Reflect.set(dataDef, "fields", newDef.fields);
                                    onUpdate();
                                    onClose();
                                }, color: "primary", variant: "contained" }, { children: "OK" }), void 0) }), void 0)] }, void 0));
            } }, void 0));
    }
    return (_jsx(Menu, Object.assign({}, extra, { children: _jsxs(DataDefEditLayerRender, { children: [_jsxs(Typography, Object.assign({ align: "center", variant: "h5" }, { children: [dataDef.name, " [", dataDef.type, "]"] }), void 0), content, _jsx("div", Object.assign({ style: { textAlign: "right" } }, { children: _jsx(Button, Object.assign({ onClick: (event) => {
                            event.stopPropagation();
                            onUpdate();
                            onClose();
                        }, color: "primary", variant: "contained" }, { children: "OK" }), void 0) }), void 0)] }, void 0) }), void 0));
};
const DataDefEditLayerRender = styled.div `
    display: flex;
    background: #fff;
    z-index: 2;
    width: 250px;
    flex-direction: column;
    padding: 15px 20px;

    > * {
        margin-bottom: 15px !important;
    }
`;
const StringDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [validValues, setValidValues] = useState(dataDef.validValues);
    const [pattern, setPattern] = useState(dataDef.pattern);
    return (_jsxs(_Fragment, { children: [_jsx(FormControlLabel, { label: "specify valid values?", control: _jsx(Switch, { checked: validValues.length > 0, onChange: (event) => {
                        if (event.target.checked) {
                            dataDef.validValues.push("");
                        }
                        else {
                            dataDef.validValues = [];
                        }
                        setValidValues([...dataDef.validValues]);
                        updateCallback();
                    }, color: "primary" }, void 0) }, void 0),
            _jsx(Collapse, Object.assign({ in: validValues.length > 0 }, { children: _jsx(PropertyEditorTextList, { editObject: dataDef, propertyName: "validValues", label: "Valid Values", updateCallback: () => {
                        setValidValues(dataDef.validValues);
                        updateCallback();
                    } }, void 0) }), void 0),
            _jsx(FormControlLabel, { label: "pattern need?", control: _jsx(Switch, { checked: pattern !== undefined, onChange: (event) => {
                        if (event.target.checked) {
                            dataDef.pattern = "";
                        }
                        else {
                            dataDef.pattern = undefined;
                        }
                        setPattern(dataDef.pattern);
                        updateCallback();
                    }, color: "primary" }, void 0) }, void 0),
            _jsx(Collapse, Object.assign({ in: pattern !== undefined }, { children: _jsx(PropertyEditorText, { editObject: dataDef, propertyName: "pattern", updateCallback: () => {
                        setPattern(dataDef.pattern);
                        updateCallback();
                    }, label: "Pattern", hint: "regular expression" }, void 0) }), void 0)] }, void 0));
};
const DateDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [storeTime, setStoreTime] = useState(dataDef.storeTime);
    // eslint-disable-next-line
    const [_, setLowerBounds] = useState(dataDef.lowerBounds);
    // eslint-disable-next-line
    const [__, setUpperBounds] = useState(dataDef.upperBounds);
    return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorBoolean, { label: "Store Time", editObject: dataDef, propertyName: "storeTime", updateCallback: () => {
                    setStoreTime(dataDef.storeTime);
                    updateCallback();
                } }, void 0),
            _jsx(PropertyEditorDate, { editObject: dataDef, propertyName: "lowerBounds", label: "Lower Bounds", storeTime: storeTime, updateCallback: () => {
                    setLowerBounds(dataDef.lowerBounds);
                    updateCallback();
                } }, void 0),
            _jsx(PropertyEditorDate, { editObject: dataDef, propertyName: "upperBounds", label: "Upper Bounds", storeTime: storeTime, updateCallback: () => {
                    setUpperBounds(dataDef.upperBounds);
                    updateCallback();
                } }, void 0)] }, void 0));
};
const NumberDataDefEditProperties = ({ dataDef, updateCallback }) => {
    const [allowDecimals, setAllowDecimals] = useState(dataDef.allowDecimals);
    // eslint-disable-next-line
    const [_, setLowerBounds] = useState(dataDef.lowerBounds);
    // eslint-disable-next-line
    const [__, setUpperBounds] = useState(dataDef.upperBounds);
    return (_jsxs(_Fragment, { children: [_jsx(PropertyEditorBoolean, { label: "Allow Decimals", editObject: dataDef, propertyName: "allowDecimals", updateCallback: () => {
                    setAllowDecimals(dataDef.allowDecimals);
                    updateCallback();
                } }, void 0),
            _jsx(PropertyEditorInteger, { editObject: dataDef, propertyName: "lowerBounds", decimal: allowDecimals, updateCallback: () => {
                    setLowerBounds(dataDef.lowerBounds);
                    updateCallback();
                }, label: "Lower Bounds" }, void 0),
            _jsx(PropertyEditorInteger, { editObject: dataDef, propertyName: "upperBounds", decimal: allowDecimals, updateCallback: () => {
                    setUpperBounds(dataDef.upperBounds);
                    updateCallback();
                }, label: "Upper Bounds" }, void 0)] }, void 0));
};
//# sourceMappingURL=DataDefEditLayer.js.map