jQuery(document).ready(function ($) {
  'use strict';

  (function () {
    var progressbar = $("#progressbar"),
      progressLabel = $(".progress-label");
    var isFileAdded = false;
    var timer, xhr;

    progressbar.progressbar(
      {
        value: false,
        change: function () {
          progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function () {
          progressLabel.text("Complete!");
        }
      }
    );

    var uploader = new plupload.Uploader(
      {
        browse_button: 'csv_file', // this can be an id of a DOM element or the DOM element itself
        url: ajaxurl,
        filters: {
          max_file_size: '10mb',
          mime_types: [
            {title: "CSV files", extensions: "csv"}
          ]
        },
        multi_selection: false,
        init: {
          FilesAdded: function (up, files) {
            plupload.each(
              files, function (file) {
                document.getElementById('filelist').innerHTML
                  = '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
              }
            );
            isFileAdded = true;
            $('.file-added').hide();

          }
        }
      }
    );

    uploader.init();

    uploader.bind(
      'PostInit', function () {
        $('#broker-import-form').on(
          'submit', function (event) {
            if (xhr && xhr.readystate != 4) {
              xhr.abort();
            }

            if (event.preventDefault) {
              event.preventDefault();
            } else {
              event.returnValue = false;
            }
            if (!isFileAdded) {
              $('.file-added').show();

              // Show error message
              $('.error.empty-file').fadeIn(500).delay(1000).fadeOut(500);
              $(window).scrollTop(0);

              return false;
            } else {
              $('.file-added').hide();
            }

            // Upload recent selected file
            while (uploader.files.length > 1) {
              uploader.removeFile(uploader.files[0]);
            }
            uploader.start();
            $(window).scrollTop(0);

            $('.no-user').remove();
            $('#submit').hide();
            $('.ajax-loader').show();
            }
        );
      }
    );

    uploader.bind(
      'BeforeUpload', function () {
        uploader.refresh();
        uploader.settings.multipart_params = {
          action: 'upload_broker',
          dry_run: $('#dry-run:checked').val()
        }
      }
    );

    uploader.bind(
      'UploadFile', function () {
        $('#html-message').html('');

        // $('.progressbar').fadeIn();
        // progressbar.progressbar("value", 0);
        // timer = setTimeout(progress, 2000);
      }
    );

    function progress () {
      // Get the current status of the update
      xhr = $.ajax(
        {
          url: ajaxurl,
          data: {
            action: 'get_broker_import_status'
          },
          type: 'GET',
          dataType: 'json',
          timeout: 2000
        }
      );

      xhr.done(
        function (response) {
          var value = parseInt(response);
          var progressbar = $("#progressbar");

          var val = progressbar.progressbar("value");
          progressbar.progressbar("value", value);

          if (val < 99) {
            timer = setTimeout(progress, 2000);
          } else {
            clearTimeout(timer);
          }
        }
      );

      xhr.fail(
        function (jqXHR, textStatus) {
          if (textStatus === 'timeout') {
            clearTimeout(timer);
            console.log('Failed from timeout. Try it again');
            timer = setTimeout(progress, 5000);
          }
        }
      );
    }

    uploader.bind(
      'Error', function (up, err) {
        $('#html-message').html("<div class='error'>Error during upload.</div>");
      }
    );

    uploader.bind(
      'FileUploaded', function (up, file, res) {
        var data = '';
        var response = res.response;
        var content = $.parseJSON(response);

        // clearTimeout(timer);
        // setTimeout(function() {
        //   progressbar.progressbar("value", 100);
        // },200);
        $('#submit').show();
        $('.ajax-loader').hide();

        if(content.file_format) {
          data += "<div class='error'><p style='margin:5px 0; color: red;'>"+content.file_format+"</p>";
        }

        if (content.empty_broker_id.length > 0) {
          data += "<div class='error'><p style='margin:5px 0; color:red;'>Following broker(s) are not imported because the broker_id is empty.</p>";
          $.each(
            content.empty_broker_id, function (i, v) {
              data += v + '<br />';
            }
          );
          data += "</div>";
        }

        if (content.empty_brokerage.length > 0) {
          data += "<div class='error'><p style='margin:5px 0; color:red;'>Following broker(s) are not imported because the brokerage/organization is empty.</p>";
          $.each(
            content.empty_brokerage, function (i, v) {
              data += v + '<br />';
            }
          );
          data += "</div>";
        }

        if (content.existing_broker.length > 0) {
            data += "<div class='error'><p style='margin:5px 0; color:red;'>Following broker(s) are not imported because the broker exists in the system.</p>";
            $.each(
                content.existing_broker, function (i, v) {
                    data += v + '<br />';
                }
            );
            data += "</div>";
        }

        if (content.success.length > 0) {
          data += "<div class='updated'><p>All registrations appear have been imported successfully.</p>";
          $.each(
            content.success, function (i, v) {
              data += v + '<br />';
            }
          );
          data += "</div>";
        }

        $('#html-message').html(data);
      }
    );
  })();
});