import { DisplayMode } from "../../enums/DisplayMode";
import { Orientation } from "../../enums/Orientation";
export class AlControlPanel {
    constructor() {
        this.boundingBoxVisible = false;
        this.displayMode = DisplayMode.MESH;
        this.optionsEnabled = false;
        this.optionsVisible = true;
        this.orientation = Orientation.CORONAL;
        this.nodesEnabled = false;
        this.nodesVisible = true;
    }
    _boundingBoxVisible(visible) {
        this.boundingBoxVisible = visible;
        this.onSetBoundingBoxVisible.emit(visible);
    }
    _displayMode(displayMode) {
        this.displayMode = displayMode;
        this.onSetDisplayMode.emit(displayMode);
    }
    _optionsEnabled(enabled) {
        this.optionsEnabled = enabled;
        this.onSetOptionsEnabled.emit(enabled);
    }
    _optionsVisible(visible) {
        this.optionsVisible = visible;
    }
    _orientation(orientation) {
        this.orientation = orientation;
        this.onSetOrientation.emit(orientation);
    }
    _slicesIndex(index) {
        this.slicesIndex = index;
        this.onSetSlicesIndex.emit(index);
    }
    _slicesWindowCenter(center) {
        this.slicesWindowCenter = center;
        this.onSetSlicesWindowCenter.emit(center);
    }
    _slicesWindowWidth(width) {
        this.slicesWindowWidth = width;
        this.onSetSlicesWindowWidth.emit(width);
    }
    _stack(stack) {
        this._stack = stack;
    }
    _stackHelper(helper) {
        this.stackHelper = helper;
    }
    _nodesEnabled(enabled) {
        this.nodesEnabled = enabled;
        this.onSetNodesEnabled.emit(enabled);
    }
    _nodesVisible(vislbe) {
        this.nodesVisible = vislbe;
    }
    _volumeSteps(steps) {
        this.volumeSteps = steps;
        this.onSetVolumeSteps.emit(steps);
    }
    _volumeWindowCenter(center) {
        this.volumeWindowCenter = center;
        this.onSetVolumeWindowCenter.emit(center);
    }
    _volumeWindowWidth(width) {
        this.volumeWindowWidth = width;
        this.onSetVolumeWindowWidth.emit(width);
    }
    renderDisplayModeToggle() {
        if (this.displayMode !== DisplayMode.MESH) {
            return (h("ion-item", { id: "mode" },
                h("ion-icon", { name: "eye" }),
                h("select", { onChange: e => (this.displayMode = e.srcElement.nodeValue) },
                    h("option", { selected: this.displayMode === DisplayMode.SLICES, value: DisplayMode.SLICES }, "Slices"),
                    h("option", { selected: this.displayMode === DisplayMode.VOLUME, value: DisplayMode.VOLUME }, "Volume"))));
        }
        return null;
    }
    renderNodesToggle() {
        if (this.nodesVisible) {
            return (h("ion-item", null,
                h("ion-icon", { name: "add-circle" }),
                h("ion-toggle", { onIonChange: e => this._nodesEnabled(e.detail.checked) })));
        }
        return null;
    }
    renderOptionsToggle() {
        if (this.optionsVisible) {
            return (h("ion-item", null,
                h("ion-icon", { name: "options" }),
                h("ion-toggle", { onIonChange: e => this._optionsEnabled(e.detail.checked) })));
        }
    }
    renderBoundingBoxEnabled() {
        return (h("ion-item", null,
            h("ion-label", null, "Bounding box"),
            h("ion-toggle", { checked: this.boundingBoxVisible, onIonChange: e => this._boundingBoxVisible(e.detail.checked) })));
    }
    renderOptions() {
        switch (this.displayMode) {
            case DisplayMode.MESH: {
                if (this.optionsVisible && this.optionsEnabled) {
                    return h("div", null, this.renderBoundingBoxEnabled());
                }
            }
        }
    }
    render() {
        return [
            this.renderDisplayModeToggle(),
            this.renderNodesToggle(),
            this.renderOptionsToggle(),
            this.renderOptions()
        ];
    }
    static get is() { return "al-control-panel"; }
    static get encapsulation() { return "shadow"; }
    static get properties() { return {
        "boundingBoxVisible": {
            "type": Boolean,
            "attr": "bounding-box-visible",
            "mutable": true
        },
        "displayMode": {
            "type": String,
            "attr": "display-mode",
            "mutable": true
        },
        "nodesEnabled": {
            "type": Boolean,
            "attr": "nodes-enabled",
            "mutable": true
        },
        "nodesVisible": {
            "type": Boolean,
            "attr": "nodes-visible",
            "mutable": true
        },
        "optionsEnabled": {
            "type": Boolean,
            "attr": "options-enabled",
            "mutable": true
        },
        "optionsVisible": {
            "type": Boolean,
            "attr": "options-visible",
            "mutable": true
        },
        "orientation": {
            "type": String,
            "attr": "orientation",
            "mutable": true
        },
        "slicesIndex": {
            "type": Number,
            "attr": "slices-index",
            "mutable": true
        },
        "slicesWindowCenter": {
            "type": Number,
            "attr": "slices-window-center",
            "mutable": true
        },
        "slicesWindowWidth": {
            "type": Number,
            "attr": "slices-window-width",
            "mutable": true
        },
        "stack": {
            "type": "Any",
            "attr": "stack",
            "mutable": true
        },
        "stackHelper": {
            "type": "Any",
            "attr": "stack-helper",
            "mutable": true
        },
        "volumeSteps": {
            "type": Number,
            "attr": "volume-steps",
            "mutable": true
        },
        "volumeWindowCenter": {
            "type": Number,
            "attr": "volume-window-center",
            "mutable": true
        },
        "volumeWindowWidth": {
            "type": Number,
            "attr": "volume-window-width",
            "mutable": true
        }
    }; }
    static get events() { return [{
            "name": "onSetBoundingBoxVisible",
            "method": "onSetBoundingBoxVisible",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetDisplayMode",
            "method": "onSetDisplayMode",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetOptionsEnabled",
            "method": "onSetOptionsEnabled",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetOrientation",
            "method": "onSetOrientation",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetSlicesIndex",
            "method": "onSetSlicesIndex",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetSlicesWindowCenter",
            "method": "onSetSlicesWindowCenter",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetSlicesWindowWidth",
            "method": "onSetSlicesWindowWidth",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetNodesEnabled",
            "method": "onSetNodesEnabled",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetVolumeSteps",
            "method": "onSetVolumeSteps",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetVolumeWindowCenter",
            "method": "onSetVolumeWindowCenter",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "onSetVolumeWindowWidth",
            "method": "onSetVolumeWindowWidth",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "/**style-placeholder:al-control-panel:**/"; }
}
