@once
@push('comments-scripts')
<script>
  document.addEventListener("alpine:init", () => {
      window.Alpine.data("compose", ({ text, autofocus = false, mentionables = {}, placeholder = "", editorUniqueId = '' } = {}) => {
        console.log('text1', text)
          let editor;
          const advancedValues = JSON.parse(mentionables);
          let mentionRegistered = false;
          let quillEditor = null;

          return {
              text,

              init() {
                  this.loadQuill().then(() => {
                      this.loadQuillMention().then(() => {
                          if (!mentionRegistered) {
                              this.registerMentionBlot();
                              mentionRegistered = true;
                          }
                          this.initializeEditor();
                      }).catch(error => {
                          console.error('Error loading Quill Mention:', error);
                      });
                  }).catch(error => {
                      console.error('Error loading Quill:', error);
                  });
              },

              initializeEditor() {
                console.log('text2', text)
                // const quillContainer = document.getElementById('quill-editor');
                  // const quillContainer = this.$el.querySelector('.quill-editor');
                  const quillContainer = $(`#comment-editor-${editorUniqueId} .quill-editor`)[0];

                  if (!quillContainer) {
                      console.error('Quill container not found.');
                      return;
                  }

                  editor = new Quill(quillContainer, {
                      theme: 'snow',
                      placeholder: placeholder,
                      modules: {
                          toolbar: false, // Disable the toolbar
                          mention: {
                              allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                              mentionDenotationChars: ["@"],
                              positioningStrategy: "fixed",
                              renderItem: (data) => {
                                  if (data.disabled) {
                                      const div = document.createElement("div");
                                      div.style = "height:10px;line-height:10px;font-size:10px;background-color:#ccc;margin:0 -20px;padding:4px";
                                      div.innerText = data.value;
                                      return div;
                                  }
                                  return data.value;
                              },
                              renderLoading: () => {
                                  return "Loading...";
                              },
                              source: (searchTerm, renderList, mentionChar) => {
                                  var matches = [];

                                  if (searchTerm.length === 0) {
                                      matches = advancedValues;
                                  } else {
                                      for (var i = 0; i < advancedValues.length; i++) {
                                          if (~advancedValues[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
                                              matches.push(advancedValues[i]);
                                          }
                                      }
                                  }

                                  var matchesWithGroupHeaders = [];
                                  for (var i = 0; i < matches.length; i++) {
                                      var match = matches[i];
                                      matchesWithGroupHeaders.push(match);
                                  }
                                  matches = matchesWithGroupHeaders;

                                  window.setTimeout(() => {
                                      renderList(matches, searchTerm);
                                  }, 1000);
                              },
                              dataAttributes: ['id', 'value', 'denotationChar', 'link', 'target', 'disabled', 'color'],
                              blotName: 'styled-mention',
                          },
                      },
                  });

                  editor.root.innerHTML = this.text;

                  console.log('text', this.text);

                  if (autofocus) {
                      editor.focus();
                  }

                  editor.on("text-change", () => {
                      text = editor.root.innerHTML;
                  });
              },

              clear() {
                  if (editor) {
                      editor.root.innerHTML = "";
                  }
              },

              registerMentionBlot() {
                  const MentionBlot = Quill.import("blots/mention");

                  class StyledMentionBlot extends MentionBlot {
                      static render(data) {
                          const element = document.createElement('span');
                          element.innerText = data.value;
                          element.style.color = data.color;
                          return element;
                      }
                  }
                  StyledMentionBlot.blotName = "styled-mention";

                  Quill.register(StyledMentionBlot);
              },

              loadQuill() {
                  return new Promise((resolve, reject) => {
                      if (window.Quill) {
                          resolve();
                      } else {
                          const script = document.createElement("script");
                          script.src = "https://cdn.quilljs.com/1.3.6/quill.min.js";
                          script.addEventListener("load", resolve);
                          script.addEventListener("error", reject);
                          document.body.appendChild(script);

                          const link = document.createElement("link");
                          link.href = "https://cdn.quilljs.com/1.3.6/quill.snow.css";
                          link.rel = "stylesheet";
                          document.head.appendChild(link);
                      }
                  });
              },

              loadQuillMention() {
                  return new Promise((resolve, reject) => {
                      if (window.Quill && window.Quill.imports['modules/mention']) {
                          resolve();
                      } else {
                          const script = document.createElement("script");
                          script.src = "https://cdn.jsdelivr.net/npm/quill-mention@4.1.0/dist/quill.mention.min.js";
                          script.addEventListener("load", resolve);
                          script.addEventListener("error", reject);
                          document.body.appendChild(script);

                          const link = document.createElement("link");
                          link.href = "https://cdn.jsdelivr.net/npm/quill-mention@4.1.0/dist/quill.mention.min.css";
                          link.rel = "stylesheet";
                          document.head.appendChild(link);
                      }
                  });
              },
          };
      });
  });
</script>
@endpush
@endonce