import { h, } from "@stencil/core";
import { findOrCreateOnReady } from "../utils";
export class LikeButton {
  constructor() {
    this.likeClicked = () => {
      if (!this.disabled)
        this.toggle();
    };
    this.count = 0;
    this.liked = false;
    this.proxy = undefined;
    this.likeCtrl = undefined;
    this.restCtrl = undefined;
    this.attribute = "_likes";
    this.disabled = false;
    this.feature = undefined;
    this.iconNo = "star-outline";
    this.iconYes = "star";
    this.method = "POST";
    this.requestMode = undefined;
    this.token = undefined;
    this.url = undefined;
  }
  async componentWillLoad() {
    await this.setState();
  }
  async setState() {
    if (this.feature != undefined) {
      this.count = this.feature.properties[this.attribute];
      if (this.likeCtrl == undefined) {
        this.likeCtrl = await findOrCreateOnReady("gl-like-controller");
      }
      this.proxy = await this.likeCtrl.create(this.feature);
      this.liked = this.proxy.isLiked();
    }
  }
  async toggle() {
    var _a;
    this.liked = !this.liked;
    this.count += this.liked ? 1 : -1;
    if (((_a = this.feature) === null || _a === void 0 ? void 0 : _a.properties) != undefined)
      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 {
      if (this.restCtrl == undefined) {
        this.restCtrl = await findOrCreateOnReady("gl-rest-controller");
      }
      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: this.likeClicked, 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": "The attribute which stores the number of likes this feature has received"
        },
        "attribute": "attribute",
        "reflect": false,
        "defaultValue": "\"_likes\""
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not this like button is disabled"
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "feature": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Feature | MapGeoJSONFeature",
          "resolved": "Feature<Geometry, { [name: string]: any; }> | GeoJSONFeature & { layer: (Omit<FillLayerSpecification, \"source\"> | Omit<LineLayerSpecification, \"source\"> | Omit<SymbolLayerSpecification, \"source\"> | Omit<CircleLayerSpecification, \"source\"> | Omit<HeatmapLayerSpecification, \"source\"> | Omit<FillExtrusionLayerSpecification, \"source\"> | Omit<RasterLayerSpecification, \"source\"> | Omit<HillshadeLayerSpecification, \"source\"> | Omit<BackgroundLayerSpecification, \"source\">) & { source: string; }; source: string; sourceLayer?: string; state: { [key: string]: any; }; }",
          "references": {
            "Feature": {
              "location": "import",
              "path": "geojson",
              "id": ""
            },
            "MapGeoJSONFeature": {
              "location": "import",
              "path": "maplibre-gl",
              "id": ""
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The feature this like button is for"
        }
      },
      "iconNo": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The icon for the like button if the user has not liked the feature"
        },
        "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": "The icon for the like button if the user"
        },
        "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": "The HTTP method this like button uses to communicate a like"
        },
        "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",
              "id": "global::RequestMode"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The cors mode this like button uses to communicate"
        },
        "attribute": "request-mode",
        "reflect": false
      },
      "token": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The authentication token this like button uses when communicating"
        },
        "attribute": "token",
        "reflect": false
      },
      "url": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The url to the endpoint which which the like button communicates.\nMost likely this will be the end point of a features-api instance."
        },
        "attribute": "url",
        "reflect": false
      }
    };
  }
  static get states() {
    return {
      "count": {},
      "liked": {},
      "proxy": {},
      "likeCtrl": {},
      "restCtrl": {}
    };
  }
  static get events() {
    return [{
        "method": "glLike",
        "name": "glLike",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "An event emitted when the user presses the like button"
        },
        "complexType": {
          "original": "{\n    success: boolean;\n    feature: Feature | MapGeoJSONFeature;\n    action: \"like\" | \"unlike\";\n    client_id: string;\n  }",
          "resolved": "{ success: boolean; feature: Feature<Geometry, { [name: string]: any; }> | MapGeoJSONFeature; action: \"like\" | \"unlike\"; client_id: string; }",
          "references": {
            "Feature": {
              "location": "import",
              "path": "geojson",
              "id": ""
            },
            "MapGeoJSONFeature": {
              "location": "import",
              "path": "maplibre-gl",
              "id": ""
            }
          }
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "feature",
        "methodName": "setState"
      }];
  }
}
//# sourceMappingURL=like-button.js.map
