import { h } from '../webmapgl.core.js';

import { a as _t } from './chunk-cf921ba9.js';

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,
            "attr": "cancel-text"
        },
        "color": {
            "type": String,
            "attr": "color"
        },
        "confirmText": {
            "type": String,
            "attr": "confirm-text"
        },
        "featureCount": {
            "state": true
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "mapId": {
            "type": String,
            "attr": "map-id"
        },
        "maxFeatures": {
            "type": Number,
            "attr": "max-features"
        },
        "minFeatures": {
            "type": Number,
            "attr": "min-features"
        },
        "visible": {
            "state": true
        }
    }; }
    static get events() { return [{
            "name": "glDrawCancel",
            "method": "glDrawCancel",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "glDrawConfirm",
            "method": "glDrawConfirm",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "body:glDrawEnter",
            "method": "handleDrawEnter"
        }, {
            "name": "body:glDrawExit",
            "method": "handleDrawExit"
        }, {
            "name": "body:glDrawCreate",
            "method": "handleDrawCreate"
        }, {
            "name": "body:glDrawDelete",
            "method": "handleDrawDelete"
        }]; }
}

export { DrawToolbar as GlDrawToolbar };
