import { jsx as i, jsxs as Q } from "react/jsx-runtime";
import { useState as l, useRef as F, useEffect as C } from "react";
import { connect as U } from "react-redux";
import { parse as c, compareJsonProps as j, decode as X } from "../utils/parseUtils.js";
import Y from "./Map.js";
import _ from "./BaseLayer.js";
import tt from "./DataLayer.js";
import et from "./LatLongLayer.js";
import ot from "./ZoomControl.js";
import it from "./ProjectedContainer.js";
import nt from "./Legends.js";
import rt from "./FlowLayer.js";
const at = (g) => {
  const {
    unique: d,
    editing: n,
    "data-identifier": x,
    "data-group": f,
    "data-layers": h = "[]",
    "data-height": V = 400,
    "data-width": ct = 1e3,
    "data-back-ground-color": k = "#88e8dc",
    "data-map-position": w = "{}",
    "data-projection": A = "geoMercator",
    "data-zoom-enabled": I = !0,
    "data-rotation-enabled": z = !1,
    "data-wait-for-filters": m = "false",
    intl: p
  } = g, [R, Z] = l(null), v = R, E = Number(V), [P, N] = l(c(w, n), []), [r, b] = l(c(h), []), s = F(null);
  C(() => {
    if (!s.current) return;
    const t = s.current.clientWidth;
    t > 0 && Z(t);
    let o = null;
    const e = () => {
      o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
        if (!s.current) return;
        const W = s.current.clientWidth;
        W > 0 && Z(W);
      });
    }, a = new ResizeObserver(e);
    return a.observe(s.current), () => {
      a.disconnect(), o && cancelAnimationFrame(o);
    };
  }, []);
  const u = F(null), [L, S] = l(null), [M, q] = l(null), [D, B] = l(null);
  C(() => {
    const t = c(w, n);
    j(P, t) || N(t);
  }, [w]), C(() => {
    const t = c(h);
    j(r, t) || b(t);
  }, [h]);
  const H = (t) => {
    const o = r.slice(), e = o.find((a) => a.id == t);
    e && (e.visible = !e.visible), b(o);
  }, J = (t) => {
    const o = r.slice(), e = o.find((a) => a.id == t);
    e && (e.patternsVisible = e.patternsVisible == null ? !1 : !e.patternsVisible), b(o);
  }, O = (t) => {
    B(t);
  }, $ = (t) => {
    const o = r.slice(), e = o.find((a) => a.id == t);
    e && (e.colorLayerVisible = e.colorLayerVisible == null ? !1 : !e.colorLayerVisible), b(o);
  }, [G, K] = l(!1), T = F(0);
  r.length;
  const y = () => {
    T.current += 1, T.current >= r.length && K(!0);
  };
  return R ? /* @__PURE__ */ i("div", { ref: s, className: "d3map-container", style: { width: "100%" }, children: /* @__PURE__ */ Q(
    it,
    {
      backgroundColor: X(k),
      height: E,
      width: v,
      projectionName: A,
      editing: n,
      initialPosition: P,
      children: [
        /* @__PURE__ */ i(Y, { rotationEnabled: c(z, n), children: r.map((t, o) => {
          if (t.type === "base")
            return /* @__PURE__ */ i(
              _,
              {
                minLabelZoomVisible: t.minLabelZoomVisible,
                onReady: y,
                transform: L,
                intl: p,
                zoom: u,
                unique: d,
                ...t
              },
              t.id
            );
          if (t.type === "data")
            return /* @__PURE__ */ i(
              tt,
              {
                minLabelZoomVisible: t.minLabelZoomVisible,
                editing: n,
                onLayerCreated: (e) => {
                },
                onReady: y,
                transform: L,
                intl: p,
                group: f,
                zoom: u,
                unique: d,
                ...t,
                settings: g.wordress,
                togglePatterns: J,
                initialPosition: P,
                waitForFilters: m == "true" || m == !0
              },
              t.id
            );
          if (t.type === "flow")
            return /* @__PURE__ */ i(
              rt,
              {
                onReady: y,
                transform: L,
                intl: p,
                group: f,
                zoom: u,
                unique: d,
                ...t,
                waitForFilters: m == "true" || m == !0
              },
              t.id
            );
          if (t.type === "dataPoints")
            return /* @__PURE__ */ i(
              et,
              {
                onReady: y,
                onZoomToPoint: O,
                selectedItem: M,
                transform: L,
                intl: p,
                group: f,
                zoom: u,
                unique: d,
                ...t,
                waitForFilters: m == "true" || m == !0
              },
              t.id
            );
        }) }),
        /* @__PURE__ */ i(
          nt,
          {
            selectedItem: M,
            unique: d,
            d2Click: (t) => q(t),
            patternsData: null,
            layers: r,
            group: f,
            onItemClick: H,
            toggleColorLayer: $
          }
        ),
        /* @__PURE__ */ i(
          ot,
          {
            readyToZoom: G,
            selectedPoint: D,
            rootationEmabled: c(z, n),
            zoomEnabled: c(I, n),
            onZoomed: S,
            width: v,
            height: E,
            ref: u,
            group: f,
            identifier: x,
            editing: n
          }
        )
      ]
    }
  ) }) : /* @__PURE__ */ i("div", { ref: s, className: "d3map-container", style: { width: "100%", height: `${V}px` } });
}, st = (g, d) => ({}), lt = {}, Ft = U(st, lt)(at);
export {
  Ft as default
};
