import { h } from "@stencil/core";
import BoundingBoxIcon from "../../assets/svg/bounding-box.svg";
import ObjectIcon from "../../assets/svg/object-alone.svg";
import OrbitCameraIcon from "../../assets/svg/orbit-camera.svg";
import RecenterIcon from "../../assets/svg/recenter.svg";
import RotateObjectIcon from "../../assets/svg/rotate-object.svg";
import { ControlsType } from "../../enums";
import i18n from "./al-view-controls.i18n.en.json";
export class AlSettings {
    constructor() {
        this._contentStrings = i18n;
    }
    _boundingBoxEnabled(enabled) {
        this.boundingBoxEnabled = enabled;
        this.boundingBoxEnabledChange.emit(enabled);
    }
    _controlsType(controlsType) {
        this.controlsType = controlsType;
        this.controlsTypeChange.emit(controlsType);
    }
    _switchBoundingBoxEnabled() {
        if (this.boundingBoxEnabled) {
            this._boundingBoxEnabled(false);
        }
        else {
            this._boundingBoxEnabled(true);
        }
    }
    _switchControls() {
        if (this.controlsType === ControlsType.ORBIT) {
            this._controlsType(ControlsType.TRACKBALL);
        }
        else if (this.controlsType === ControlsType.TRACKBALL) {
            this._controlsType(ControlsType.ORBIT);
        }
    }
    renderControlsTypeSelect() {
        let cameraIcon;
        let cameraLabel;
        if (this.controlsType === ControlsType.ORBIT) {
            cameraIcon = OrbitCameraIcon;
            cameraLabel = this._contentStrings.orbit;
        }
        else if (this.controlsType === ControlsType.TRACKBALL) {
            cameraIcon = RotateObjectIcon;
            cameraLabel = this._contentStrings.rotate;
        }
        let boundingBoxEnabledIcon;
        if (this.boundingBoxEnabled) {
            boundingBoxEnabledIcon = BoundingBoxIcon;
        }
        else {
            boundingBoxEnabledIcon = ObjectIcon;
        }
        return (h("div", { style: {
                "margin-top": "10px",
                "text-align": "center"
            } },
            h("ion-button", { style: {
                    width: "28%",
                    height: "45px",
                    "margin-left": "5px",
                    "margin-right": "5px"
                }, size: "small", onClick: () => {
                    this._switchControls();
                } },
                h("div", { style: {
                        "font-size": "10px",
                        color: "white",
                        "margin-bottom": "2px"
                    } },
                    h("ion-icon", { style: {
                            "min-width": "20px",
                            "min-height": "20px",
                            "margin-bottom": "2px"
                        }, src: cameraIcon, title: cameraLabel }),
                    h("br", null),
                    cameraLabel)),
            h("ion-button", { style: {
                    width: "28%",
                    height: "45px",
                    "margin-left": "5px",
                    "margin-right": "5px"
                }, size: "small", onClick: () => {
                    this.recenter.emit();
                } },
                h("div", { style: {
                        "font-size": "10px",
                        color: "white",
                        "margin-bottom": "2px"
                    } },
                    h("ion-icon", { style: {
                            "min-width": "20px",
                            "min-height": "20px",
                            "margin-bottom": "2px"
                        }, src: RecenterIcon, title: this._contentStrings.recenter }),
                    h("br", null),
                    this._contentStrings.recenter)),
            h("ion-button", { style: {
                    width: "28%",
                    height: "45px",
                    "margin-left": "5px",
                    "margin-right": "5px"
                }, size: "small", onClick: () => {
                    this._switchBoundingBoxEnabled();
                } },
                h("div", { style: {
                        "font-size": "10px",
                        color: "white",
                        "margin-bottom": "2px"
                    } },
                    h("ion-icon", { style: {
                            "min-width": "20px",
                            "min-height": "20px",
                            "margin-bottom": "2px"
                        }, src: boundingBoxEnabledIcon, title: this._contentStrings.bounds }),
                    h("br", null),
                    this._contentStrings.bounds))));
    }
    render() {
        return (h("div", { style: {
                "max-width": "100%",
                "overflow-x": "hidden",
                "border-width": "0 0 1px 0",
                "border-color": "var(--ion-list-header-border-color)",
                "border-style": "solid",
                "padding-bottom": "10px",
                "margin-bottom": "10px"
            } }, this.renderControlsTypeSelect()));
    }
    static get is() { return "al-view-controls"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["al-view-controls.css"]
    }; }
    static get styleUrls() { return {
        "$": ["al-view-controls.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
        }
    }; }
    static get events() { return [{
            "method": "boundingBoxEnabledChange",
            "name": "boundingBoxEnabledChange",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "controlsTypeChange",
            "name": "controlsTypeChange",
            "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": {}
            }
        }]; }
}
