window.jQuery(document).ready(() => {
  function changeLibraryPosition() {
    if (document.querySelector(".brandy-patterns-library-wrapper")) {
      setTimeout(() => {
        if (document.querySelector(".brandy-patterns-library-wrapper")) {
          observer.disconnect();
        }
      }, 1000);
      return;
    }

    const Modal = wp.components.Modal;

    // Create a React element for the App using wp.element
    const { createElement, createRoot, useState } = wp.element;
    const App = () => {
      const [openDialog, setOpenDialog] = useState(false);
      const handleOpenDialog = () => {
        setOpenDialog(true);
      };
      return createElement(
        "div",
        { className: "brandy-patterns-library-wrapper" },
        createElement(
          "button",
          { className: "button", onClick: handleOpenDialog },
          "Brandy Patterns Library"
        ),
        openDialog &&
          createElement(
            Modal,
            {
              title: "Brandy Patterns Library",
              onRequestClose: () => {
                setOpenDialog(false);
              },
              open: openDialog,
            },
            createElement(
              "div",
              { className: "brandy-patterns-library-dialog" },
              createElement(
                "p",
                { className: "brandy-patterns-library-dialog-content" },
                createElement(
                  "span",
                  { className: "brandy-patterns-library-dialog-content-text" },
                  "Please install "
                ),
                createElement(
                  "a",
                  {
                    href: `${brandyPatternsLibrary.site_url}/wp-admin/plugin-install.php?s=brandy%2520blocks&tab=search&type=term`,
                  },
                  "Brandy Blocks"
                ),
                createElement(
                  "span",
                  { className: "brandy-patterns-library-dialog-content-text" },
                  " to use the patterns library."
                )
              )
            )
          )
      );
    };

    const library = document.createElement("div");
    createRoot(library).render(createElement(App));

    setTimeout(() => {
      if (document.querySelector(".brandy-patterns-library-wrapper")) {
        return;
      }
      document
        .querySelector(".editor-document-tools__left")
        .appendChild(library);
    }, 1);
  }

  const observer = new MutationObserver(function (mutations) {
    changeLibraryPosition();
  });

  if (!window.wp) {
    return;
  }

  const { registerPlugin } = window.wp.plugins ?? {};
  const { PluginSidebar } = window.wp.editSite ?? window.wp.editPost ?? {};

  if (PluginSidebar) {
    registerPlugin("brandy-patterns-library", {
      render: function () {
        const interval = setInterval(() => {
          const targetElement = document.querySelector(
            ".editor-header__toolbar"
          );

          if (targetElement) {
            observer.observe(
              document.querySelector(".editor-header__toolbar"),
              {
                childList: true,
                subtree: true,
              }
            );

            changeLibraryPosition();
            clearInterval(interval);
          }
        }, 100);
      },
    });
  }
});