import { h } from "@stencil/core";
import BoundingBoxIcon from "../../assets/svg/bounding-box.svg";
import BrightnessIcon from "../../assets/svg/brightness.svg";
import ContrastIcon from "../../assets/svg/contrast.svg";
import ControlsTypeIcon from "../../assets/svg/controls-type.svg";
import DisplayModeIcon from "../../assets/svg/display-mode.svg";
import GraphIcon from "../../assets/svg/graph.svg";
// import MaterialIcon from "../../assets/svg/material.svg";
import OrientationIcon from "../../assets/svg/orientation.svg";
import RecenterIcon from "../../assets/svg/recenter.svg";
import SliderIcon from "../../assets/svg/slider.svg";
import UnitsIcon from "../../assets/svg/units.svg";
import { ControlsType, Orientation, Units } from "../../enums";
import { DisplayMode } from "../../enums/DisplayMode";
import i18n from "./al-settings.i18n.en.json";
export class AlSettings {
    constructor() {
        this._contentStrings = i18n;
    }
    _boundingBoxEnabled(enabled) {
        this.boundingBoxEnabled = enabled;
        this.boundingBoxEnabledChanged.emit(enabled);
    }
    _controlsType(controlsType) {
        this.controlsType = controlsType;
        this.controlsTypeChanged.emit(controlsType);
    }
    _displayMode(displayMode) {
        this.displayMode = displayMode;
        this.displayModeChanged.emit(displayMode);
    }
    _graphEnabled(enabled) {
        this.graphEnabled = enabled;
        this.graphEnabledChanged.emit(enabled);
    }
    // private _material(material: Material) {
    //   this.material = material;
    //   this.materialChanged.emit(material);
    // }
    _orientation(orientation) {
        this.orientation = orientation;
        this.orientationChanged.emit(orientation);
    }
    _slicesIndex(index) {
        this.slicesIndex = index;
        this.slicesIndexChanged.emit(index);
    }
    _slicesBrightness(brightness) {
        this.slicesBrightness = brightness;
        this.slicesBrightnessChanged.emit(brightness);
    }
    _slicesContrast(contrast) {
        this.slicesContrast = contrast;
        this.slicesContrastChanged.emit(contrast);
    }
    _units(units) {
        this.units = units;
        this.unitsChanged.emit(units);
    }
    // private _volumeSteps(steps: number) {
    //   this.volumeSteps = steps;
    //   this.volumeStepsChanged.emit(steps);
    // }
    _volumeBrightness(brightness) {
        this.volumeBrightness = brightness;
        this.volumeBrightnessChanged.emit(brightness);
    }
    _volumeContrast(contrast) {
        this.volumeContrast = contrast;
        this.volumeContrastChanged.emit(contrast);
    }
    renderDisplayModeToggle() {
        if (this.displayMode !== DisplayMode.MESH) {
            return (h("ion-item", { style: {
                    display: "var(--display-mode-display, block)"
                } },
                h("ion-icon", { src: DisplayModeIcon, slot: "start", title: this._contentStrings.displayMode }),
                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;
    }
    renderGraphEnabled() {
        return (h("ion-item", { style: {
                display: "var(--graph-enabled-display, block)"
            } },
            h("ion-icon", { src: GraphIcon, slot: "start", title: this._contentStrings.graphEnabled }),
            h("ion-toggle", { slot: "end", checked: this.graphEnabled, onIonChange: e => this._graphEnabled(e.detail.checked) })));
    }
    renderBoundingBoxEnabled() {
        return (h("ion-item", { style: {
                display: "var(--bounding-box-enabled-display, block)"
            } },
            h("ion-icon", { src: BoundingBoxIcon, slot: "start", title: this._contentStrings.boundingBoxEnabled }),
            h("ion-toggle", { slot: "end", checked: this.boundingBoxEnabled, onIonChange: e => this._boundingBoxEnabled(e.detail.checked) })));
    }
    renderControlsTypeSelect() {
        return (h("ion-item", { style: {
                display: "var(--controls-type-display, block)"
            } },
            h("ion-icon", { src: ControlsTypeIcon, slot: "start", title: this._contentStrings.controlsType }),
            h("select", { slot: "end", onChange: e => this._controlsType(e.srcElement
                    .value) },
                h("option", { selected: this.controlsType === ControlsType.ORBIT, value: ControlsType.ORBIT }, this._contentStrings.orbit),
                h("option", { selected: this.controlsType === ControlsType.TRACKBALL, value: ControlsType.TRACKBALL }, this._contentStrings.trackball))));
    }
    renderRecenterButton() {
        return (h("ion-item", { style: {
                display: "var(--recenter-display, block)"
            } },
            h("ion-icon", { src: RecenterIcon, slot: "start", title: this._contentStrings.recenter }),
            h("ion-button", { slot: "end", size: "small", onClick: () => {
                    this.recenter.emit();
                } }, this._contentStrings.recenter)));
    }
    renderUnitsSelect() {
        return (h("ion-item", { style: {
                display: "var(--units-display, block)"
            } },
            h("ion-icon", { src: UnitsIcon, slot: "start", title: this._contentStrings.units }),
            h("select", { slot: "end", onChange: e => this._units(e.srcElement.value) },
                h("option", { selected: this.units === Units.METERS, value: Units.METERS }, this._contentStrings.meters),
                h("option", { selected: this.units === Units.MILLIMETERS, value: Units.MILLIMETERS }, this._contentStrings.millimeters))));
    }
    // public renderMaterialSelect() {
    //   return (
    //     <ion-item
    //       style={{
    //         display: "var(--material-display, block)"
    //       }}
    //     >
    //       <ion-icon
    //         src={MaterialIcon}
    //         slot="start"
    //         title={this._contentStrings.material}
    //       />
    //       <select
    //         slot="end"
    //         onChange={e =>
    //           this._material((e.srcElement as HTMLSelectElement)
    //             .value as Material)
    //         }
    //       >
    //         <option
    //           selected={this.material === Material.DEFAULT}
    //           value={Material.DEFAULT}
    //         >
    //           {this._contentStrings.default}
    //         </option>
    //         <option
    //           selected={this.material === Material.CLAY}
    //           value={Material.CLAY}
    //         >
    //           {this._contentStrings.clay}
    //         </option>
    //         <option
    //           selected={this.material === Material.NORMALS}
    //           value={Material.NORMALS}
    //         >
    //           {this._contentStrings.normals}
    //         </option>
    //         <option
    //           selected={this.material === Material.WIREFRAME}
    //           value={Material.WIREFRAME}
    //         >
    //           {this._contentStrings.wireframe}
    //         </option>
    //         <option
    //           selected={this.material === Material.XRAY}
    //           value={Material.XRAY}
    //         >
    //           {this._contentStrings.xray}
    //         </option>
    //       </select>
    //     </ion-item>
    //   );
    // }
    renderGenericOptions() {
        return [
            this.renderBoundingBoxEnabled(),
            this.renderControlsTypeSelect(),
            this.renderRecenterButton(),
            this.renderUnitsSelect()
        ];
    }
    renderOptions() {
        switch (this.displayMode) {
            case DisplayMode.SLICES: {
                return (h("div", null,
                    this.renderGenericOptions(),
                    h("ion-item", { style: {
                            display: "var(--slices-index-display, block)"
                        } },
                        h("ion-icon", { src: SliderIcon, slot: "start", title: this._contentStrings.sliceIndex }),
                        h("ion-range", { slot: "end", min: "0", max: "1", step: ".1", value: this.slicesIndex, onIonChange: e => this._slicesIndex(e.detail.value) })),
                    h("ion-item", { style: {
                            display: "var(--slices-orientation-display, block)"
                        } },
                        h("ion-icon", { src: OrientationIcon, slot: "start", title: this._contentStrings.orientation }),
                        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-brightness-display, block)"
                        } },
                        h("ion-icon", { src: BrightnessIcon, slot: "start", title: this._contentStrings.brightness }),
                        h("ion-range", { slot: "end", min: "0", max: "1", step: ".1", value: this.slicesBrightness, onIonChange: e => this._slicesBrightness(e.detail.value) })),
                    h("ion-item", { style: {
                            display: "var(--slices-contrast-display, block)"
                        } },
                        h("ion-icon", { src: ContrastIcon, slot: "start", title: this._contentStrings.contrast }),
                        h("ion-range", { slot: "end", min: "0", max: "1", step: ".1", value: this.slicesContrast, onIonChange: e => this._slicesContrast(e.detail.value) }))));
            }
            case DisplayMode.VOLUME: {
                return (h("div", null,
                    this.renderGenericOptions(),
                    h("ion-item", { style: {
                            display: "var(--volume-brightness-display, block)"
                        } },
                        h("ion-icon", { src: BrightnessIcon, slot: "start", title: this._contentStrings.brightness }),
                        h("ion-range", { slot: "end", min: "0", max: "1", step: ".1", value: this.volumeBrightness, onIonChange: e => {
                                this._volumeBrightness(e.detail.value);
                            } })),
                    h("ion-item", { style: {
                            display: "var(--volume-contrast-display, block)"
                        } },
                        h("ion-icon", { src: ContrastIcon, slot: "start", title: this._contentStrings.contrast }),
                        h("ion-range", { slot: "end", min: "0", max: "1", step: ".1", value: this.volumeContrast, onIonChange: e => this._volumeContrast(e.detail.value) }))));
            }
            case DisplayMode.MESH: {
                return this.renderGenericOptions();
            }
            default: {
                return;
            }
        }
    }
    render() {
        return [
            this.renderDisplayModeToggle(),
            this.renderGraphEnabled(),
            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 {
        "boundingBoxEnabled": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "bounding-box-enabled",
            "reflect": false
        },
        "controlsType": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "ControlsType",
                "resolved": "ControlsType.ORBIT | ControlsType.TRACKBALL",
                "references": {
                    "ControlsType": {
                        "location": "import",
                        "path": "../../enums"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "controls-type",
            "reflect": false
        },
        "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
        },
        "graphEnabled": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "graph-enabled",
            "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
        },
        "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
        },
        "units": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "Units",
                "resolved": "Units.METERS | Units.MILLIMETERS",
                "references": {
                    "Units": {
                        "location": "import",
                        "path": "../../enums"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "units",
            "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
        }
    }; }
    static get events() { return [{
            "method": "boundingBoxEnabledChanged",
            "name": "boundingBoxEnabledChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "controlsTypeChanged",
            "name": "controlsTypeChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "displayModeChanged",
            "name": "displayModeChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "orientationChanged",
            "name": "orientationChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "recenter",
            "name": "recenter",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesIndexChanged",
            "name": "slicesIndexChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesBrightnessChanged",
            "name": "slicesBrightnessChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "slicesContrastChanged",
            "name": "slicesContrastChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "unitsChanged",
            "name": "unitsChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "graphEnabledChanged",
            "name": "graphEnabledChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeBrightnessChanged",
            "name": "volumeBrightnessChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "volumeContrastChanged",
            "name": "volumeContrastChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
