export class LikeButton {
    constructor() {
        this.count = 0;
        this.liked = false;
        this.attribute = '_likes';
        this.disabled = false;
        this.iconNo = 'star-outline';
        this.iconYes = 'star';
        this.method = 'POST';
    }
    async componentWillLoad() {
        await this.setState();
    }
    async setState() {
        if (this.feature) {
            this.count = this.feature.properties[this.attribute];
            this.proxy = await this.likeCtrl.create(this.feature);
            this.liked = this.proxy.isLiked();
        }
    }
    async toggle() {
        this.liked = !this.liked;
        this.count += (this.liked) ? 1 : -1;
        if (this.feature && this.feature.properties)
            this.feature.properties[this.attribute] = this.count;
        (this.liked) ? this.proxy.like() : this.proxy.unlike();
        let success = false;
        let clientId = this.proxy.getClientId();
        try {
            await this.restCtrl.create({
                type: 'Feature',
                properties: {
                    action: (this.liked) ? 'like' : 'unlike',
                    feature_id: this.feature.id,
                    client_id: clientId
                }
            }, {
                url: this.url,
                token: this.token,
                method: this.method,
                mode: this.requestMode
            });
            success = true;
        }
        catch (e) { }
        this.glLike.emit({
            success: success,
            feature: this.feature,
            action: (this.liked) ? 'like' : 'unlike',
            client_id: clientId
        });
    }
    render() {
        return (h("ion-button", { fill: "clear", onClick: () => { if (!this.disabled)
                this.toggle(); }, disabled: this.disabled },
            h("ion-icon", { slot: "start", name: (this.liked) ? this.iconYes : this.iconNo }),
            h("span", { class: "gl-like-button-count" }, this.count)));
    }
    static get is() { return "gl-like-button"; }
    static get properties() { return {
        "attribute": {
            "type": String,
            "attr": "attribute"
        },
        "count": {
            "state": true
        },
        "disabled": {
            "type": Boolean,
            "attr": "disabled"
        },
        "el": {
            "elementRef": true
        },
        "feature": {
            "type": "Any",
            "attr": "feature",
            "mutable": true,
            "watchCallbacks": ["setState"]
        },
        "iconNo": {
            "type": String,
            "attr": "icon-no"
        },
        "iconYes": {
            "type": String,
            "attr": "icon-yes"
        },
        "likeCtrl": {
            "connect": "gl-like-controller"
        },
        "liked": {
            "state": true
        },
        "method": {
            "type": String,
            "attr": "method"
        },
        "proxy": {
            "state": true
        },
        "requestMode": {
            "type": String,
            "attr": "request-mode"
        },
        "restCtrl": {
            "connect": "gl-rest-controller"
        },
        "token": {
            "type": String,
            "attr": "token"
        },
        "url": {
            "type": String,
            "attr": "url"
        }
    }; }
    static get events() { return [{
            "name": "glLike",
            "method": "glLike",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
