{% load static %}
<div>
  <label class="text-base-content/50 mb-4 text-xs font-medium"
    >Draw Structure</label
  >
  <iframe
    id="{{ iframe_id }}"
    src="{% static '/js/ketcher3/standalone/index.html' %}"
    width="100%"
    height="{{ height }}"
    tabindex="-1"
  ></iframe>
</div>
<script>
  // Used to block write back to text field if "Render" was clicked
  var propagate = true;

  // Helper function to safely get Ketcher instance from iframe
  function getKetcherInstance(iframeId = "{{ iframe_id }}") {
    const ketcherFrame = document.getElementById(iframeId);
    if (!ketcherFrame) {
      console.error("Ketcher iframe not found:", iframeId);
      return null;
    }

    try {
      if (
        "contentWindow" in ketcherFrame &&
        ketcherFrame.contentWindow.ketcher
      ) {
        return ketcherFrame.contentWindow.ketcher;
      }
    } catch (err) {
      console.error("Cannot access Ketcher iframe - possible CORS issue:", err);
    }

    return null;
  }

  async function ketcherToInputs(
    ketcher,
    smilesTargetId = "{{ text_input_id }}",
    molfileTargetId = "{{ molfile_input_id }}",
    iframeId = "{{ iframe_id }}",
  ) {
    if (!propagate) {
      propagate = true;
      return;
    }

    document.getElementById(smilesTargetId).value =
      await getSmilesFromKetcher(iframeId);
    if (molfileTargetId !== "") {
      document.getElementById(molfileTargetId).value =
        await getMolfileFromKetcher(iframeId);
    }
  }

  async function getSmilesFromKetcher(iframeId = "{{ iframe_id }}") {
    const ketcher = getKetcherInstance(iframeId);

    if (ketcher && ketcher.getSmiles) {
      return ketcher.getSmiles();
    }
  }

  async function getMolfileFromKetcher(iframeId = "{{ iframe_id }}") {
    const ketcher = getKetcherInstance(iframeId);

    if (ketcher && ketcher.getMolfile) {
      return ketcher.getMolfile();
    }
  }

  function setKetcherMolecule(
    smilesOrMolfile,
    propagateChange = true,
    iframeId = "{{ iframe_id }}",
  ) {
    const ketcher = getKetcherInstance(iframeId);
    propagate = propagateChange || false;
    ketcher.setMolecule(smilesOrMolfile);
  }

  document.addEventListener("DOMContentLoaded", function () {
    const predictKetcher = document.getElementById("{{ iframe_id }}");

    predictKetcher.addEventListener("load", function () {
      const checkKetcherReady = () => {
        const win = this.contentWindow;
        if (win.ketcher && "editor" in win.ketcher) {
          window.predictKetcher = win.ketcher;
          win.ketcher.editor.event.change.handlers.push({
            once: false,
            priority: 0,
            f: ketcherToInputs,
            ketcher: win.ketcher,
          });
        } else {
          setTimeout(checkKetcherReady, 100);
        }
      };
      checkKetcherReady();
    });
  });
</script>
