import { h } from '@stencil/core';
import { _t } from '../i18n/i18n';
export class DrawToolbar {
    constructor() {
        this.visible = false;
        this.featureCount = 0;
        this.cancelText = _t('webmapgl.draw-toolbar.cancel');
        this.color = 'primary';
        this.confirmText = _t('webmapgl.draw-toolbar.confirm');
        this.label = _t('webmapgl.draw-toolbar.label');
        this.maxFeatures = 1;
        this.minFeatures = 1;
    }
    handleDrawEnter(e) {
        if (e.detail.mapId != this.mapId)
            return;
        this.featureCount = 0;
        this.visible = true;
    }
    handleDrawExit(e) {
        if (e.detail.mapId != this.mapId)
            return;
        this.visible = false;
    }
    handleDrawCreate(e) {
        if (e.detail.mapId != this.mapId)
            return;
        this.featureCount += 1;
    }
    handleDrawDelete(e) {
        if (e.detail.mapId != this.mapId)
            return;
        this.featureCount -= 1;
    }
    cancel() {
        this.glDrawCancel.emit({
            mapId: this.mapId
        });
    }
    confirm() {
        this.glDrawConfirm.emit({
            mapId: this.mapId
        });
    }
    render() {
        if (!this.visible)
            return;
        let small = screen.width <= 640;
        let canConfirm = this.featureCount >= this.minFeatures &&
            this.featureCount <= this.maxFeatures;
        return (h("ion-toolbar", { color: this.color },
            h("ion-title", null, this.label),
            h("ion-buttons", { slot: "end" },
                h("ion-button", { onClick: () => { this.cancel(); } },
                    h("ion-icon", { slot: (small) ? 'icon-only' : 'start', name: "close" }),
                    (small) ? null : this.cancelText),
                h("ion-button", { onClick: () => { if (canConfirm)
                        this.confirm(); }, disabled: !canConfirm },
                    h("ion-icon", { slot: (small) ? 'icon-only' : 'start', name: "checkmark" }),
                    (small) ? null : this.confirmText))));
    }
    static get is() { return "gl-draw-toolbar"; }
    static get properties() { return {
        "cancelText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cancel-text",
            "reflect": false,
            "defaultValue": "_t('webmapgl.draw-toolbar.cancel')"
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "Color",
                "resolved": "string",
                "references": {
                    "Color": {
                        "location": "import",
                        "path": "@ionic/core"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "'primary'"
        },
        "confirmText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "confirm-text",
            "reflect": false,
            "defaultValue": "_t('webmapgl.draw-toolbar.confirm')"
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false,
            "defaultValue": "_t('webmapgl.draw-toolbar.label')"
        },
        "mapId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "map-id",
            "reflect": false
        },
        "maxFeatures": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "max-features",
            "reflect": false,
            "defaultValue": "1"
        },
        "minFeatures": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "min-features",
            "reflect": false,
            "defaultValue": "1"
        }
    }; }
    static get states() { return {
        "visible": {},
        "featureCount": {}
    }; }
    static get events() { return [{
            "method": "glDrawCancel",
            "name": "glDrawCancel",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glDrawConfirm",
            "name": "glDrawConfirm",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get listeners() { return [{
            "name": "glDrawEnter",
            "method": "handleDrawEnter",
            "target": "body",
            "capture": false,
            "passive": false
        }, {
            "name": "glDrawExit",
            "method": "handleDrawExit",
            "target": "body",
            "capture": false,
            "passive": false
        }, {
            "name": "glDrawCreate",
            "method": "handleDrawCreate",
            "target": "body",
            "capture": false,
            "passive": false
        }, {
            "name": "glDrawDelete",
            "method": "handleDrawDelete",
            "target": "body",
            "capture": false,
            "passive": false
        }]; }
}
