<div id="response-templates-data"></div>
<%= javascript_packs_with_chunks_tag "validateFileInputs", "responseTemplates", defer: true %>

<% if @comment.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
    <ul>
      <% @comment.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
  <br><br><br><br>
<% end %>

<%= form_for(@comment, authenticity_token: false) do |f| %>
  <% if @article&.comment_template.present? && @comment.new_record? %>
    <div class="article-comment-form-preamble">
      This post comes with a comment template
    </div>
  <% end %>

  <%# this is used by JS and it will be replaced with the CSRF token received from the server %>
  <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token">

  <% unless @comment.persisted? %>
    <%= f.hidden_field :commentable_id, value: commentable&.id %>
    <%= f.hidden_field :commentable_type, value: commentable_type %>
    <%= f.hidden_field :parent_id, value: @parent_comment.id if @parent_comment %>
  <% end %>
  <div class="field" id="textarea-wrapper">
    <div class="response-templates-container hidden">
        <header>
          <button type="button" class="personal-template-button active" data-target-type="personal" data-form-id="new_comment">PERSONAL</button>
          <button type="button" class="moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">MODERATOR</button>
        </header>
        <img class="loading-img hidden" src="<%= asset_path("loading-ellipsis.svg") %>" alt="loading">
        <div class="personal-responses-container">
          <%# filled by JS %>
        </div>
        <div class="moderator-responses-container hidden">
          <%# filled by JS %>
        </div>
        <a target="_blank" rel="noopener nofollow" href="<%= user_settings_path(tab: "response-templates") %>" class="mod-response-create-new">
          Create new template
          <%= inline_svg_tag("external-link-logo.svg", aria: true) %>
        </a>
        <p>Create templates to quickly answer FAQs or store snippets for re-use.</p>
    </div>
    <%= f.text_area :body_markdown,
                    placeholder: "Add to the discussion",
                    onfocus: "handleFocus(event)",
                    onblur: "handleBlur(event)",
                    onkeyup: "handleKeyUp(event)",
                    onkeydown: "handleKeyDown(event)",
                    id: "text-area",
                    autofocus: @comment.persisted?,
                    required: true,
                    'aria-label': "Add a comment to the discussion" %>
    <div class="preview-toggle comment-preview-div" id="preview-div"></div>
  </div>
  <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox">
  </div>
  <a href="/p/editor_guide" class="markdown-guide" target="_blank" rel="noopener" title="Markdown Guide">
    <img alt="markdown guide" class="icon-image" src="<%= asset_path("info.svg") %>" />
  </a>
  <div class="editor-response-templates">
    <button class="response-templates-button" title="Use a response template" type="button" data-has-listener="false">
      <img src="<%= asset_path("response-template.svg") %>" alt="" class="icon-image" data-form-id="new_comment">
    </button>
  </div>
  <div class="editor-image-upload">
    <input type="file" id="image-upload-main" name="file" accept="image/*" style="display:none">
    <button class="image-upload-button" id="image-upload-button-main" onclick="handleImageUpload(event,'main')" title="Upload Image">
      <img alt="upload image" class="icon-image" src="<%= asset_path("image-upload.svg") %>" />
    </button>
    <label class="image-upload-file-label" id="image-upload-file-label-main"></label>
    <input type="submit" id='image-upload-submit-main' value="Upload" style="display:none">
    <input class="uploaded-image" id="uploaded-image-main" />
  </div>
  <div class="actions" id="submit-wrapper">
    <%# See https://github.com/thepracticaldev/dev.to/issues/7081 %>
    <%= link_to((:back if sanitized_referer(request.referer)) || commentable&.path || @comment.path, "aria-label": "Cancel action") do %>
      <button id="cancel-button" class="comment-action-button comment-action-cancel">CANCEL</button>
    <% end %>
    <button id="preview-button" class="comment-action-button comment-action-preview">PREVIEW</button>
    <%= f.submit "SUBMIT", onclick: "validateField(event)", class: "comment-action-button", id: "submit-button" %>
  </div>
<% end %>

<% if @comment.persisted? %>
  <script defer>
    if (document.getElementById("edit_comment_<%= @comment&.id %>")) {
      document.getElementById("edit_comment_<%= @comment&.id %>").onsubmit = function (e) {
        e.preventDefault();
        document.getElementById("submit-button").classList.add("submitting");
        document.getElementById("text-area").classList.add("submitting");
        var form = this;
        var waitingOnCSRF = setInterval(function () {
          var metaTag = document.querySelector("meta[name='csrf-token']")
          if (metaTag) {
            clearInterval(waitingOnCSRF);
            authToken = metaTag.getAttribute("content");
            document.getElementById("new_comment_authenticity_token").value = authToken;
            form.submit();
          }
        }, 1);
      }
    }
  </script>

  <script defer>
    var formElement = document.getElementById("edit_comment_<%= @comment&.id %>");
    if (formElement) {
      formElement.getElementsByClassName("comment-action-cancel")[0].style.display = "inline-block";
    }
  </script>
<% end %>
