import { h } from "@stencil/core";
import AlertIcon from "../../assets/svg/alert.svg";
import { Orientation } from "../../enums";
import { DisplayMode } from "../../enums/DisplayMode";
import i18n from "./al-settings.i18n.en.json";
export class AlSettings {
    constructor() {
        this._contentStrings = i18n;
    }
    _displayMode(displayMode) {
        this.displayMode = displayMode;
        this.displayModeChange.emit(displayMode);
    }
    _orientation(orientation) {
        this.orientation = orientation;
        this.orientationChange.emit(orientation);
    }
    _slicesIndex(index) {
        this.slicesIndex = index;
        this.slicesIndexChange.emit(index);
    }
    _slicesBrightness(brightness) {
        this.slicesBrightness = brightness;
        this.slicesBrightnessChange.emit(brightness);
    }
    _slicesContrast(contrast) {
        this.slicesContrast = contrast;
        this.slicesContrastChange.emit(contrast);
    }
    _volumeBrightness(brightness) {
        this.volumeBrightness = brightness;
        this.volumeBrightnessChange.emit(brightness);
    }
    _volumeContrast(contrast) {
        this.volumeContrast = contrast;
        this.volumeContrastChange.emit(contrast);
    }
    _volumeSteps(steps) {
        steps = Math.round(steps * 10) / 10; // 1 decimal place.
        this.volumeSteps = steps;
        this.volumeStepsChange.emit(steps);
    }
    _volumeStepsHighEnabled(enabled) {
        if (enabled) {
            this._volumeSteps(this.volumeSteps + 0.2);
        }
        else {
            this._volumeSteps(this.volumeSteps - 0.2);
        }
    }
    renderDisplayModeToggle() {
        if (this.displayMode !== DisplayMode.MESH) {
            return (h("ion-item", { style: {
                    display: "var(--display-mode-display, block)",
                    "margin-top": "10px"
                } },
                h("span", { title: this._contentStrings.displayMode }, "Mode"),
                h("select", { slot: "end", onChange: e => this._displayMode(e.srcElement
                        .value) },
                    h("option", { selected: this.displayMode === DisplayMode.SLICES, value: DisplayMode.SLICES }, this._contentStrings.slices),
                    h("option", { selected: this.displayMode === DisplayMode.VOLUME, value: DisplayMode.VOLUME }, this._contentStrings.volume))));
        }
        return null;
    }
    renderHiResEnabled() {
        return (h("ion-item", { style: {
                display: "var(--volume-steps-high-display, block)"
            } },
            h("span", { title: this._contentStrings.volumeStepsHighEnabledWarning },
                this._contentStrings.volumeStepsHighEnabled,
                " ",
                h("ion-icon", { src: AlertIcon })),
            h("ion-toggle", { slot: "end", checked: this.volumeStepsHighEnabled, onIonChange: e => this._volumeStepsHighEnabled(e.detail.checked) })));
    }
    renderSlicesControls() {
        return (h("div", null,
            h("ion-item", { style: {
                    display: "var(--slices-orientation-display, block)"
                } },
                h("span", { color: "primary" }, "Plane"),
                h("select", { slot: "end", onChange: e => this._orientation(e.srcElement
                        .value) },
                    h("option", { selected: this.orientation === Orientation.CORONAL, value: Orientation.CORONAL }, this._contentStrings.coronal),
                    h("option", { selected: this.orientation === Orientation.SAGGITAL, value: Orientation.SAGGITAL }, this._contentStrings.saggital),
                    h("option", { selected: this.orientation === Orientation.AXIAL, value: Orientation.AXIAL }, this._contentStrings.axial))),
            h("ion-item", { style: {
                    display: "var(--slices-index-display, block)"
                } },
                h("span", null, this._contentStrings.slice),
                h("ion-range", { slot: "end", min: 0, max: 1, step: 1 / this.slicesMaxIndex, value: this.slicesIndex, onIonChange: e => this._slicesIndex(e.detail.value) }))));
    }
    renderSlicesWindowingControls() {
        return (h("div", null,
            h("ion-list-header", { style: {
                    color: "var(--al-item-color)",
                    "border-width": "1px 0 0 0",
                    "border-color": "var(--ion-list-header-border-color)",
                    "border-style": "solid",
                    "margin-top": "10px"
                } },
                h("span", null, this._contentStrings.windowingTitle)),
            h("ion-item", { style: {
                    display: "var(--slices-brightness-display, block)"
                } },
                h("span", null, this._contentStrings.brightness),
                h("ion-range", { slot: "end", min: 0, max: 1, step: 0.05, snaps: true, ticks: false, value: this.slicesBrightness, onIonChange: e => {
                        this._slicesBrightness(e.detail.value);
                    } })),
            h("ion-item", { style: {
                    display: "var(--slices-contrast-display, block)"
                } },
                h("span", null, this._contentStrings.contrast),
                h("ion-range", { slot: "end", min: 0, max: 1, step: 0.05, snaps: true, ticks: false, value: this.slicesContrast, onIonChange: e => this._slicesContrast(e.detail.value) }))));
    }
    renderVolumeWindowingControls() {
        return (h("div", null,
            h("ion-list-header", { style: {
                    color: "var(--al-item-color)",
                    "border-width": "1px 0 0 0",
                    "border-color": "var(--ion-list-header-border-color)",
                    "border-style": "solid",
                    "margin-top": "10px"
                } },
                h("span", null, this._contentStrings.windowingTitle)),
            h("ion-item", { style: {
                    display: "var(--volume-brightness-display, block)"
                } },
                h("span", null, this._contentStrings.brightness),
                h("ion-range", { slot: "end", min: 0, max: 1, step: 0.05, snaps: true, ticks: false, value: this.volumeBrightness, onIonChange: e => {
                        this._volumeBrightness(e.detail.value);
                    } })),
            h("ion-item", { style: {
                    display: "var(--volume-contrast-display, block)"
                } },
                h("span", null, this._contentStrings.contrast),
                h("ion-range", { slot: "end", min: 0, max: 1, step: 0.05, snaps: true, ticks: false, value: this.volumeContrast, onIonChange: e => this._volumeContrast(e.detail.value) }))));
    }
    renderOptions() {
        switch (this.displayMode) {
            case DisplayMode.SLICES: {
                return (h("div", null,
                    this.renderSlicesControls(),
                    this.renderSlicesWindowingControls()));
            }
            case DisplayMode.VOLUME: {
                return (h("div", null,
                    this.renderHiResEnabled(),
                    this.renderVolumeWindowingControls()));
            }
            default: {
                return;
            }
        }
    }
    render() {
        return (h("div", { style: {
                "max-width": "100%",
                "overflow-x": "hidden"
            } },
            this.renderDisplayModeToggle(),
            this.renderOptions()));
    }
    static get is() { return "al-settings"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["al-settings.css"]
    }; }
    static get styleUrls() { return {
        "$": ["al-settings.css"]
    }; }
    static get properties() { return {
        "displayMode": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "DisplayMode",
                "resolved": "DisplayMode.MESH | DisplayMode.SLICES | DisplayMode.VOLUME",
                "references": {
                    "DisplayMode": {
                        "location": "import",
                        "path": "../../enums/DisplayMode"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "display-mode",
            "reflect": false
        },
        "orientation": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "Orientation",
                "resolved": "Orientation.AXIAL | Orientation.CORONAL | Orientation.SAGGITAL",
                "references": {
                    "Orientation": {
                        "location": "import",
                        "path": "../../enums"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "orientation",
            "reflect": false
        },
        "slicesIndex": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slices-index",
            "reflect": false
        },
        "slicesMaxIndex": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slices-max-index",
            "reflect": false
        },
        "slicesBrightness": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slices-brightness",
            "reflect": false
        },
        "slicesContrast": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slices-contrast",
            "reflect": false
        },
        "volumeBrightness": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "volume-brightness",
            "reflect": false
        },
        "volumeContrast": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "volume-contrast",
            "reflect": false
        },
        "volumeSteps": {
            "type": "number",
            "mutable": true,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "volume-steps",
            "reflect": false
        },
        "volumeStepsHighEnabled": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "volume-steps-high-enabled",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "displayModeChange",
            "name": "displayModeChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "orientationChange",
            "name": "orientationChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesIndexChange",
            "name": "slicesIndexChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesBrightnessChange",
            "name": "slicesBrightnessChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesContrastChange",
            "name": "slicesContrastChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeBrightnessChange",
            "name": "volumeBrightnessChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeContrastChange",
            "name": "volumeContrastChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeStepsChange",
            "name": "volumeStepsChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeStepsHighEnabledChange",
            "name": "volumeStepsHighEnabledChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
