/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as u } from "../../chunks/runtime.js";
import { b as m } from "../../chunks/mapViewUtils.js";
import { css as _, html as o } from "lit";
import { createRef as p, ref as k } from "lit-html/directives/ref.js";
import { LitElement as g, createEvent as h, noShadowRoot as f } from "@arcgis/lumina";
import b from "@arcgis/core/Graphic.js";
import C from "@arcgis/core/rest/support/RelationshipQuery.js";
const F = _`@layer{:host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1)!important;background-color:var(--calcite-color-surface-2)!important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}}`;
class I extends g {
  constructor() {
    super(...arguments), this.enableSnapping = !1, this.graphics = [], this.showUserImageInCommentsList = !1, this.showFullCommentTitle = !0, this._likeFieldAvailable = !1, this._likeCount = 0, this._disLikeCount = 0, this._dislikeFieldAvailable = !1, this._commentsAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._relatedFeaturesOIDs = [], this._updating = !1, this._infoCard = p(), this._commentsList = p(), this._likeField = "", this._dislikeField = "", this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this.relatedTableId = "", this.loadingStatus = h(), this.commentClick = h(), this.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
  }
  static {
    this.properties = { enableSnapping: 5, mapView: 0, graphics: 0, reportingOptions: 0, layerItemsHash: 0, showUserImageInCommentsList: 5, showFullCommentTitle: 5, _likeFieldAvailable: 16, _likeCount: 16, _disLikeCount: 16, _dislikeFieldAvailable: 16, _commentsAvailable: 16, _isLikeBtnClicked: 16, _isDislikeBtnClicked: 16, _relatedFeaturesOIDs: 16, _updating: 16 };
  }
  static {
    this.styles = F;
  }
  static {
    this.shadowRootOptions = f;
  }
  willUpdate(i) {
    i.has("graphics") && this.graphicsWatchHandler();
  }
  async graphicsWatchHandler() {
    await this.getCompleteGraphic(this.graphics[0]), this.checkLikeDislikeFields(), await this.processComments();
  }
  async refresh(i) {
    i && await this.getCompleteGraphic(i), await this.processComments(), i && this.isLikeDislikeConfigured(i.layer) ? this.graphics.length > 1 && this.checkLikeDislikeFields() : (this._likeFieldAvailable = !1, this._dislikeFieldAvailable = !1);
  }
  async back() {
    this._infoCard.value && this._infoCard.value.back();
  }
  async next() {
    this._infoCard.value && this._infoCard.value.next();
  }
  async toggleListView() {
    this._infoCard.value && this._infoCard.value.toggleListView();
  }
  async load() {
    await this.getCompleteGraphic(this.graphics[0]), this.checkLikeDislikeFields(), await this.processComments();
  }
  render() {
    const i = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : "1=0";
    return o`<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this.graphics} .mapView=${this.mapView} @selectionChanged=${(e) => {
      this.featureSelectionChange.emit(e.detail);
    }} position=relative ${k(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._relatedFeaturesOIDs.length} comments`} icon-end=speech-bubble kind=neutral @click=${() => {
      this.addComment.emit();
    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0} likes`} icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0} dislikes`} icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
      this.commentClick.emit();
    }} @featureSelect=${(e) => {
      this.commentSelect.emit(e.detail);
    }} page-size=5 .selectedLayerId=${this.relatedTableId} .showFullTitle=${this.showFullCommentTitle} .showUserImageInList=${this.showUserImageInCommentsList} text-size=small .whereClause=${i} ${k(this._commentsList)}></feature-list>` || ""}</calcite-panel>`;
  }
  async getCompleteGraphic(i) {
    if (i) {
      const e = i.layer, s = e.createQuery(), t = Number(i.getObjectId());
      if (!Number.isNaN(t)) {
        s.objectIds = [t];
        const l = await e.queryFeatures(s);
        this._selectedGraphic = l.features[0];
      }
    }
  }
  async processComments() {
    const i = this._selectedGraphic?.layer;
    if (this.reportingOptions && this.reportingOptions[i.id] && this.reportingOptions[i.id].comment && i?.relationships && i.relationships?.length > 0) {
      const s = this.mapView && await m(this.mapView);
      let t = null, l = null;
      if (i?.relationships?.some((a) => {
        const r = s?.filter((n) => i.url === n.url && n.layerId === a.relatedTableId);
        return r && r.length > 0 ? (t = r[0], l = a.id, !0) : !1;
      }), this.relatedTableId = t?.id ?? "", this.relatedTableId) {
        const a = this._selectedGraphic?.attributes[i?.objectIdField], r = new C({
          objectIds: [a],
          outFields: ["*"],
          relationshipId: l
        }), n = r && await i.queryRelatedFeatures(r).catch((d) => {
          console.error(d);
        }), c = [];
        n && n[a] && n[a].features.forEach((d) => {
          c.push(d.attributes[t.objectIdField]);
        }), this._relatedFeaturesOIDs = c, this._commentsAvailable = !0;
      } else
        this._relatedFeaturesOIDs = [], this._commentsAvailable = !1;
    } else
      this._relatedFeaturesOIDs = [], this._commentsAvailable = !1, this.relatedTableId = "";
  }
  isLikeDislikeConfigured(i) {
    let e = !1, s = !1;
    if (this.reportingOptions && i && this.reportingOptions[i.id]) {
      if (!this.reportingOptions[i.id].like && !this.reportingOptions[i.id].dislike)
        return !1;
      const t = this.reportingOptions[i.id].likeField, l = this.reportingOptions[i.id].dislikeField;
      if (!t && !l)
        return !1;
      i.fields.forEach((a) => {
        this._validFieldTypes.indexOf(a.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (a.name === t && this.reportingOptions[i.id].like ? e = !0 : a.name === l && this.reportingOptions[i.id].dislike && (s = !0));
      });
    }
    return e || s;
  }
  checkLikeDislikeFields() {
    this._likeFieldAvailable = !1, this._dislikeFieldAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._likeCount = 0, this._disLikeCount = 0;
    const i = this._selectedGraphic?.layer;
    if (this.reportingOptions && i && this.reportingOptions[i?.id]) {
      if (this._likeField = this.reportingOptions[i.id].likeField || "", this._dislikeField = this.reportingOptions[i.id].dislikeField || "", !this._likeField && !this._dislikeField)
        return;
      i.fields.forEach((e) => {
        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic?.attributes[e.name] || 0) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic?.attributes[e.name] || 0));
      }), this.getFromLocalStorage();
    }
  }
  onLikeButtonClick() {
    this._isDislikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].dislike && this.onDislikeButtonClick(), this._isLikeBtnClicked = !this._isLikeBtnClicked, this._isLikeBtnClicked ? this._likeCount++ : this._likeCount--, this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
  }
  onDislikeButtonClick() {
    this._isLikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].like && this.onLikeButtonClick(), this._isDislikeBtnClicked = !this._isDislikeBtnClicked, this._isDislikeBtnClicked ? this._disLikeCount++ : this._disLikeCount--, this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
  }
  async updateFeaturesLikeDislikeField(i, e) {
    const s = {}, t = this._selectedGraphic?.layer;
    this._updating = !0;
    const l = this._selectedGraphic;
    if (l) {
      l.attributes[i] = Number(l.attributes[i]) + (e ? 1 : -1), s[t.objectIdField] = l.attributes[t.objectIdField], s[i] = l.attributes[i];
      const a = new b();
      if (a) {
        a.attributes = s;
        const r = { updateFeatures: [a] };
        await t.applyEdits(r).then(() => {
          this._selectedGraphic = l, this.setInLocalStorage(), this._updating = !1, this.likeOrDislikeClicked.emit();
        }, (n) => {
          this._updating = !1, console.log(n);
        });
      }
    }
  }
  getFromLocalStorage() {
    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
    if (e) {
      const t = JSON.parse(e).filter((l) => l.id === this._selectedGraphic?.getObjectId());
      t.length > 0 && (this._isLikeBtnClicked = t[0].like, this._isDislikeBtnClicked = t[0].dislike);
    }
  }
  setInLocalStorage() {
    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
    let s = [];
    if (e) {
      s = JSON.parse(e);
      const t = s.findIndex((l) => l.id === this._selectedGraphic?.getObjectId());
      t >= 0 && s.splice(t, 1);
    }
    s.push({
      id: this._selectedGraphic?.getObjectId(),
      like: this._isLikeBtnClicked && this._likeCount !== 0,
      dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
    }), i?.toString() && localStorage.setItem(i.toString(), JSON.stringify(s));
  }
}
u("feature-details", I);
export {
  I as FeatureDetails
};
