var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html, LitElement } from "lit";
import { customElement, property, state, query } from "lit/decorators.js";
import "@openremote/or-components/or-ace-editor";
import { InputType } from "@openremote/or-mwc-components/or-mwc-input";
let OrConfMapGeoJson = class OrConfMapGeoJson extends LitElement {
    constructor() {
        super(...arguments);
        this._jsonValid = true;
    }
    /* -------------- */
    render() {
        var _a;
        const heading = "GeoJSON editor";
        const content = html `
            <or-ace-editor .value="${(_a = this.geoJson) === null || _a === void 0 ? void 0 : _a.source}"
                           @or-ace-editor-changed="${(ev) => {
            this._jsonValid = ev.detail.valid;
            if (this._jsonValid) {
                this._aceEditorValue = ev.detail.value;
            }
        }}"
            ></or-ace-editor>
        `;
        const actions = [
            {
                actionName: "close",
                content: "close"
            },
            {
                actionName: "ok",
                content: "update",
                disabled: !this._jsonValid,
                action: () => {
                    this.geoJson = this.parseGeoJson(this._aceEditorValue); // update with new value
                    this.dispatchEvent(new CustomEvent("update", { detail: { value: this.geoJson } }));
                }
            },
        ];
        const styles = html `
            <style>
                .mdc-dialog__surface {
                    width: 1024px;
                    overflow-x: visible !important;
                    overflow-y: visible !important;
                }
                #dialog-content {
                    border-top-width: 1px;
                    border-top-style: solid;
                    border-bottom-width: 1px;
                    border-bottom-style: solid;
                    padding: 0;
                    overflow: visible;
                    height: 60vh;
                }
            </style>
        `;
        return html `
            <or-mwc-input type="${InputType.BUTTON}" label="geoJson" outlined icon="pencil" @or-mwc-input-changed="${() => { this.openJsonEditor(); }}"></or-mwc-input>
            <or-mwc-dialog id="geojson-modal" .heading="${heading}" .content="${content}" .actions="${actions}" .styles="${styles}" .dismissAction="${null}"></or-mwc-dialog>
        `;
    }
    openJsonEditor() {
        this._dialog.open();
    }
    parseGeoJson(jsonString) {
        let geoJsonObj;
        try {
            geoJsonObj = JSON.parse(jsonString);
        }
        catch (err) {
            console.warn(err);
            this._jsonValid = false;
            return;
        }
        return {
            source: geoJsonObj,
            layers: []
        };
    }
};
__decorate([
    property()
], OrConfMapGeoJson.prototype, "geoJson", void 0);
__decorate([
    state()
], OrConfMapGeoJson.prototype, "_jsonValid", void 0);
__decorate([
    query("#geojson-modal")
], OrConfMapGeoJson.prototype, "_dialog", void 0);
OrConfMapGeoJson = __decorate([
    customElement("or-conf-map-geojson")
], OrConfMapGeoJson);
export { OrConfMapGeoJson };
//# sourceMappingURL=or-conf-map-geojson.js.map