import { h } from '@stencil/core';
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();
        // Fail silently if request fails.
        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",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "attribute",
            "reflect": false,
            "defaultValue": "'_likes'"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        },
        "feature": {
            "type": "any",
            "mutable": true,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "feature",
            "reflect": false
        },
        "iconNo": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-no",
            "reflect": false,
            "defaultValue": "'star-outline'"
        },
        "iconYes": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-yes",
            "reflect": false,
            "defaultValue": "'star'"
        },
        "method": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'",
                "resolved": "\"DELETE\" | \"GET\" | \"PATCH\" | \"POST\" | \"PUT\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "method",
            "reflect": false,
            "defaultValue": "'POST'"
        },
        "requestMode": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "RequestMode",
                "resolved": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
                "references": {
                    "RequestMode": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "request-mode",
            "reflect": false
        },
        "token": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "token",
            "reflect": false
        },
        "url": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "url",
            "reflect": false
        }
    }; }
    static get connectProps() { return [{
            "name": "likeCtrl",
            "connect": "gl-like-controller"
        }, {
            "name": "restCtrl",
            "connect": "gl-rest-controller"
        }]; }
    static get states() { return {
        "count": {},
        "liked": {},
        "proxy": {}
    }; }
    static get events() { return [{
            "method": "glLike",
            "name": "glLike",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "feature",
            "methodName": "setState"
        }]; }
}
