import * as React from "react";
import ReactDOM from "react-dom";
import Kartograf from "./epaka-pl-map-input-block/epaka-map/kartograf";
import { publish } from "./epaka-pl-map-input-block/utils/events";
import "./epaka-pl-map-input-block/style.scss";
import PointType from "./epaka-pl-map-input-block/utils/pointsType";
import StringHelper from "./epaka-pl-map-input-block/utils/stringHelper";

let inputRef = null;

function waitForElem(id) {
  return new Promise((resolve) => {
    if (document.getElementById(id)) {
      return resolve(document.getElementById(id));
    }

    const observer = new MutationObserver((mutations) => {
      if (document.getElementById(id)) {
        observer.disconnect();
        resolve(document.getElementById(id));
      }
    });

    observer.observe(document, { childList: true, subtree: true });
  });
}

const onPointApprovalClient = (point) => {
  document.getElementById("epaka_paczkomat").value = point.point_id;
  document.getElementById("epaka_paczkomat_opis").value = [
    PointType.Epaka,
    PointType.PointAndEpaka,
  ].includes(point.type)
    ? point.name
    : StringHelper.preparePointDescription(point);
};

const onPointApprovalAdmin = (point) => {
  // console.log(point);
  console.log(inputRef.parentElement.getElementsByTagName("input"));
  inputRef.parentElement.getElementsByTagName("input")[0].value =
    point.point_id;
  inputRef.parentElement.getElementsByTagName("input")[1].value = [
    PointType.Epaka,
    PointType.PointAndEpaka,
  ].includes(point.type)
    ? point.name
    : StringHelper.preparePointDescription(point);
};

waitForElem("epaka-map-root").then((elem) => {
  window.addEventListener("epaka-pl-show-map-client", (event) => {
    inputRef = event.detail;
    publish("openEpakaMap", {
      onPointApproval: onPointApprovalClient,
      dataType: "Obiorca",
      courier: Number(event.detail.dataset.mapSourceId),
      country: "PL",
      postal_code: undefined,
      chosenPointId: undefined,
      chosenPoint: undefined,
      options: {
        courierMapFilters: {
          nadanie_kurier: true,
          nadanie_punkt_kuriera: true,
          nadanie_paczkomat_kuriera: true,
          nadanie_punkt_epaka: true,
        },
        function: "odbior",
        cod_only: false,
        onlyEpaka: false,
        onlyMachines: false,
        blockParcelLocker: false,
        showMachines: true,
        showPoints: true,
      },
    });
  });

  window.addEventListener("epaka-pl-show-map-admin", (event) => {
    inputRef = event.detail;
    publish("openEpakaMap", {
      onPointApproval: onPointApprovalAdmin,
      dataType: "Nadawca",
      courier: Number(event.detail.dataset.mapSourceId),
      country: "PL",
      postal_code: undefined,
      chosenPointId: undefined,
      chosenPoint: undefined,
      options: {
        courierMapFilters: {
          nadanie_kurier: true,
          nadanie_punkt_kuriera: true,
          nadanie_paczkomat_kuriera: true,
          nadanie_punkt_epaka: true,
        },
        function: "nadanie",
        cod_only: false,
        onlyEpaka: false,
        onlyMachines: false,
        blockParcelLocker: false,
        showMachines: true,
        showPoints: true,
      },
    });
  });
  const App = () => {
    return (
      <div className={"epaka-map"}>
        <Kartograf
          onMapClose={() => {
            document.getElementsByTagName("body")[0].style.overflowY = "scroll";
          }}
        />
      </div>
    );
  };

  if (ReactDOM.createRoot) {
    const root = ReactDOM.createRoot(elem);

    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );
  } else {
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      elem,
    );
  }
});
