import { jsx as r, jsxs as I } from "react/jsx-runtime";
import y from "react";
import * as u from "d3";
import { Icon as b, Popup as k } from "semantic-ui-react";
import { FormattedMessage as E } from "react-intl";
class O extends y.Component {
  constructor(t) {
    super(t), this.zoomRef = y.createRef(), this.lastInternalZoom = null, this.lastUserTransform = null, this.zoomed = this.zoomed.bind(this), this.zoomEnd = this.zoomEnd.bind(this), this.zoomIn = this.zoomIn.bind(this), this.zoomOut = this.zoomOut.bind(this), this.reset = this.reset.bind(this), this.fullView = this.fullView.bind(this), this.transition2fullView = this.transition2fullView.bind(this), this._fullView = this._fullView.bind(this), this.initialized = !1, this.zoom = u.zoom().scaleExtent([0.1, 300]).on("zoom", this.zoomed).on("end", this.zoomEnd);
  }
  componentDidMount() {
    const { zoomEnabled: t = !0 } = this.props, i = this.getSelection();
    this._fullView(!1), t && (i.on("dblclick.zoom", null), i.on("dblclick", (o) => {
      o.preventDefault(), i.transition().duration(250).call(this.zoom.scaleBy, 1.5);
    }), i.on("wheel.zoom", null), i.on("wheel", (o) => {
      o.preventDefault();
      const s = o.deltaY > 0 ? 1 / 1.5 : 1.5;
      i.transition().duration(250).call(this.zoom.scaleBy, s);
    }), i.call(this.zoom)), this.fullView();
  }
  componentDidUpdate(t) {
    const i = this.getSelection(), {
      zoomEnabled: o,
      initialPosition: s,
      readyState: d,
      height: f,
      width: h,
      selectedPoint: e,
      projection: a,
      editing: l
    } = this.props;
    !this.initialized && this.props.readyToZoom && (this.fullView(), this.initialized = !0);
    const m = JSON.stringify(t.initialPosition) !== JSON.stringify(s);
    if (console.log("zoomChanged", m), t.zoomEnabled !== o || m && !l)
      if (o && i || l) {
        if (s && this.lastInternalZoom) {
          const n = (x, S = 3) => Number(x.toFixed(S)), { x: c, y: z, k: p } = s, { x: g, y: w, k: V } = this.lastInternalZoom;
          if (Math.abs(n(c) - n(g)) < 1 && Math.abs(n(z) - n(w)) < 1 && Math.abs(n(p) - n(V)) < 1e-3) {
            this.lastInternalZoom = null;
            return;
          }
        }
        i.call(this.zoom).on(".zoom", this.zoom), this.transition2fullView();
      } else i && i.on(".zoom", null);
    !t.readyState && d && this.fullView(), (t.height !== f || t.width !== h) && this.fullView(), e != t.selectedPoint && e && this.zoomTo(a([e.y, e.x]));
  }
  zoomed(t) {
    var o, s;
    const i = this.getSelection();
    i && (i.selectAll("g.zoomable").attr("transform", t.transform), (s = (o = this.props).onZoomed) == null || s.call(o, t.transform), this.props.editing && t.sourceEvent && (this.lastUserTransform = t.transform));
  }
  zoomEnd(t) {
    var e, a;
    const { identifier: i, editing: o, width: s, height: d, postMessageOrigin: f = "*" } = this.props, h = this.lastUserTransform || t.transform;
    if (this.lastUserTransform = null, (a = (e = this.props).onZoomed) == null || a.call(e, h), o) {
      const l = (g, w = 3) => Number(g.toFixed(w)), { x: m, y: n, k: c } = h, z = { x: l(m), y: l(n), k: l(c) };
      this.lastInternalZoom = z;
      const p = {
        type: `d3_map_${i}`,
        value: {
          ...z,
          width: s,
          height: d
        }
      };
      window.parent.postMessage(p, f);
    }
  }
  zoomIn() {
    const t = this.getSelection();
    if (t) {
      const i = this.props.editing ? 0 : this.props.transitionDuration || 500;
      t.transition().duration(i).call(this.zoom.scaleBy, 2);
    }
  }
  zoomTo(t) {
    const i = u.zoomIdentity.translate(this.props.width / 2, this.props.height / 2).scale(200).translate(-t[0], -t[1]), o = this.getSelection();
    this.props.editing || this.props.transitionDuration, o.transition().duration(750).call(this.zoom.transform, i);
  }
  zoomOut() {
    const t = this.getSelection();
    if (t) {
      const i = this.props.editing ? 0 : this.props.transitionDuration || 500;
      t.transition().duration(i).call(this.zoom.scaleBy, 0.5);
    }
  }
  reset() {
    const t = this.getSelection();
    t && (this.props.editing ? t.call(this.zoom.transform, u.zoomIdentity.translate(0, 0).scale(1)) : this.transition2fullView());
  }
  getSelection() {
    return u.select(this.zoomRef.current.parentNode.querySelector("svg"));
  }
  _fullView(t = !0) {
    const { initialPosition: i, width: o, height: s, transform: d } = this.props;
    if (!i) return;
    const { x: f = 100, y: h = 23, k: e = 1, width: a, height: l } = i;
    if (!a || !l || !e) return;
    const m = f + (o - a) / 2 * (1 - e), n = h + (s - l) / 2 * (1 - e), c = this.getSelection();
    c && c.transition().duration(t ? 750 : 0).attr("transform", d).call(this.zoom.transform, u.zoomIdentity.translate(m, n).scale(e));
  }
  transition2fullView() {
    this._fullView(!0);
  }
  fullView() {
    this._fullView(!1);
  }
  render() {
    const { editing: t, zoomEnabled: i = !0 } = this.props;
    return /* @__PURE__ */ r("div", { ref: this.zoomRef, className: `zoom ignore ${i ? "" : "disabled"}`, children: (t || i) && /* @__PURE__ */ I("div", { children: [
      /* @__PURE__ */ r("div", { className: "button plus", onClick: this.zoomIn, children: /* @__PURE__ */ r(b, { name: "plus", size: "small" }) }),
      /* @__PURE__ */ r("div", { className: "button minus", onClick: this.zoomOut, children: /* @__PURE__ */ r(b, { name: "minus", size: "small" }) }),
      /* @__PURE__ */ r(
        k,
        {
          content: /* @__PURE__ */ r(E, { id: "map.reset.tooltip", defaultMessage: "Reset zoom" }),
          trigger: /* @__PURE__ */ r("div", { className: "button reset", onClick: this.reset, children: /* @__PURE__ */ r(b, { name: "repeat", size: "small" }) })
        }
      )
    ] }) });
  }
}
export {
  O as default
};
