// source --> https://highresolutions.com/wp-content/plugins/drag-and-drop-file-upload-for-contact-form-7/frontend/js/dropfiles-cf7.js?ver=1.1.5 
(function ($) {
  "use strict";
  jQuery(document).ready(function ($) {
    document.addEventListener('wpcf7mailsent', function (event) {
      $(".cf7-drop-upload").val("");
      $(".cf7-drop-statusbar").remove();
    }, false);
    function cf7_sendFileToServer(formData, status, $handler) {
      var uploadURL = cf7_file_uploads.ajax_url;
      var jqXHR = jQuery.ajax({
        xhr: function () {
          var xhrobj = jQuery.ajaxSettings.xhr();
          if (xhrobj.upload) {
            xhrobj.upload.addEventListener('progress', function (event) {
              var percent = 0;
              var position = event.loaded || event.position;
              var total = event.total;
              if (event.lengthComputable) {
                percent = Math.ceil(position / total * 100) - 1;
              }
              status.setProgress(percent);
            }, false);
          }
          return xhrobj;
        },
        url: uploadURL,
        type: "POST",
        contentType: false,
        processData: false,
        cache: false,
        data: formData,
        success: function (data) {
          status.setProgress(100);

          if (data.data.status == "ok") {
            status.name_upload(data.data.text);
            console.log($handler);
            var $input = $handler.closest('.wpcf7-form-control-wrap').find(".cf7-drop-upload");
            var currentVal = $input.val();
            if (currentVal == "") {
              $input.val(data.data.text);
            } else {
              $input.val(currentVal + "|" + data.data.text);
            }
          } else {
            status.text(data.data.message || cf7_file_uploads.text_content_limit);
          }
        }
      });
      status.setAbort(jqXHR);
    }
    function cf7_createStatusbar($handler) {
      var rowCount = $(".cf7-drop-statusbar").length + 1;
      var row = (rowCount % 2 == 0) ? "even" : "odd";
      this.statusbar = $("<div class='cf7-drop-statusbar " + row + "'></div>");
      this.type = $("<div class='cf7-drop-type'></div>").appendTo(this.statusbar);
      this.type_file = $("<div class='cf7-drop-type_file'></div>").appendTo(this.statusbar);
      this.filename = $("<span class='cf7-drop-filename'></span>").appendTo(this.statusbar);
      this.img = $('<div style="display:none" class="cf7-drop-img" ></div>').appendTo(this.statusbar);
      this.size = $("<span class='cf7-drop-filesize'></span>").appendTo(this.statusbar);
      this.abort = $('<div class="cf7-drop-abort"></div>').appendTo(this.statusbar);
      this.remove = $('<div style="display:none" class="cf7-drop-remove" ></div>').appendTo(this.statusbar);
      this.progressBar = $("<div class='cf7-drop-progressBar'><div></div></div>").appendTo(this.statusbar);
      this.error = $("<div class='cf7-drop-text-error'></div>").appendTo(this.statusbar);
      $handler.after(this.statusbar);
      this.text = function (txt) {
        this.error.addClass("cf7-text-error").html(txt);
        this.progressBar.addClass("cf7-text-error-pro");
      }
      this.name_upload = function (txt) {
        this.remove.attr('data-name', txt);
      }
      this.setFileSize = function (txt) {
        this.type_file.html(txt);
      }
      this.setFileImg = function (txt) {
        this.img.html('<img src="' + txt + '" />').show();
        this.type.hide();
        this.type_file.hide();
      }
      this.setFileNameSize = function (name, size) {
        var sizeKB = size / 1024;
        var sizeStr = (sizeKB > 1024) ? "(" + (sizeKB / 1024).toFixed(2) + " MB)" : "(" + sizeKB.toFixed(2) + " KB)";
        this.filename.html(name);
        this.size.html(sizeStr);
      }
      this.setProgress = function (progress) {
        var progressBarWidth = progress * this.progressBar.width() / 100;
        this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "%&nbsp;");
        if (parseInt(progress) >= 100) {
          this.abort.hide();
          this.remove.show();
        }
      }
      this.setAbort = function (jqxhr) {
        var sb = this.statusbar;
        this.abort.click(function () {
          jqxhr.abort();
          sb.hide();
        });
      }
    }
    function upload_file(file, $handler) {
      const validImageTypes = ['gif', 'jpeg', 'jpg', 'png', 'webp'];
      var fd = new FormData();
      fd.append('file', file);
      fd.append('size', $handler.data("size"));
      fd.append('type', $handler.data("type"));
      fd.append('nonce', cf7_file_uploads.nonce);
      fd.append('type_upload', $handler.data("type_upload"));
      fd.append('action', "cf7_file_uploads");
      var status = new cf7_createStatusbar($handler);
      var file_type = file.name.split('.').pop().toLowerCase();
      status.setFileNameSize(file.name, file.size);
      status.setFileSize(file_type);
      if ($handler.attr("data-preview") == 1 && validImageTypes.includes(file_type)) {
        var fileReader = new FileReader();
        fileReader.onload = function () {
          status.setFileImg(fileReader.result);
        }
        fileReader.readAsDataURL(file);
      }
      cf7_sendFileToServer(fd, status, $handler);
    }
    function cf7_handleFileUpload(files, $handler) {
      var max = parseInt($handler.attr("data-max")) || 0;
      var name = $handler.closest('.wpcf7-form-control-wrap').find(".cf7-drop-upload").val() || "";
      var count = name ? name.split("|").length : 0;
      if (max > 0 && files.length > (max - count)) {
        alert(cf7_file_uploads.text_maximum + " " + max + " files");
      } else {
        for (var i = 0; i < files.length; i++) {
          (function (file, index) {
            setTimeout(function () {
              upload_file(file, $handler);
            }, 500 * index);
          })(files[i], i);
        }
      }
    }
    var $allHandlers = $(".cf7-dragandrophandler");
    // Remove border on mouse leave if desired, but here we just handle drag events.
    $allHandlers.on('dragenter dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
      $(this).css('border', '2px solid #0B85A1');
    });
    $allHandlers.on('drop', function (e) {
      e.preventDefault();
      $(this).css('border', '2px dotted #0B85A1');
      var files = e.originalEvent.dataTransfer.files;
      cf7_handleFileUpload(files, $(this));
    });
    $(document).on('dragenter dragover drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
    });
    $allHandlers.find('a').on('click', function (e) {
      e.preventDefault();
      $(this).closest(".cf7-dragandrophandler-container").find('.input-uploads').click();
    });
    $allHandlers.closest(".cf7-dragandrophandler-container").find('.input-uploads').on('change', function (e) {
      var files = this.files;
      var $handler = $(this).closest('.cf7-dragandrophandler-container').find('.cf7-dragandrophandler');
      cf7_handleFileUpload(files, $handler);
    });
    $("body").on("click", ".cf7-drop-remove", function (e) {
      e.preventDefault();
      var $removeBtn = $(this);
      var cr_name = $removeBtn.data("name");
      var data = {
        'action': 'cf7_dropfiles_remove',
        'name': cr_name,
        'nonce': cf7_file_uploads.nonce,
      };
      var $input = $removeBtn.closest('.wpcf7-form-control-wrap').find('.cf7-drop-upload');
      var names = ($input.val() || "").split("|");
      var newNames = names.filter(function (n) { return n && n !== cr_name; });
      $input.val(newNames.join("|"));
      $removeBtn.closest('.cf7-drop-statusbar').remove();
      $.post(cf7_file_uploads.ajax_url, data, function (response) {

      });
      return false;
    });
  });
})(jQuery);