const MDCSelect = mdc.select.MDCSelect;
const MDCSelectFoundation = mdc.select.MDCSelectFoundation;
const MDCSnackbar = mdc.snackbar.MDCSnackbar;
const MDCSnackbarFoundation = mdc.snackbar.MDCSnackbarFoundation;

//var gallery = studioUrl = studioKey = studioSecret = null;
var ga = null;
var encryptedSecret = false;
var messages = new MDCSnackbar(document.querySelector('.mdc-snackbar'));

var postJsEventWithCallback = window.Alteryx.Gui.Utils.Functions.postJsEventWithCallback;

var validateUrl = function(url) {
  url = url.trim();
  var httpTest = new RegExp("^(http|https)://", "i");
  if (!httpTest.test(url)) {
    url = "http://" + url;
  }
  if (url.charAt(url.length - 1) == "/") {
    url = url.substr(0, url.length - 1);
  }
  var apiTest = new RegExp("\/api\/v1", "i");
  if (!apiTest.test(url)){
    url = url + "/api/v1";
  }
  return url;
}

var atxEncrypt = function(unencyrpted, callback) {
  postJsEventWithCallback(
    'Encrypt',
    {text: unencyrpted},
    function(encryptedString) {
      callback(encryptedString);
    });
}

var atxDecrypt = function(encrypted, callback) {
  postJsEventWithCallback(
    'Decrypt',
    {text: encrypted},
    function(decryptedString) {
      callback(decryptedString);
    });
}

var updateSecret = function(text) {
  $('#StudioSecret').val(text);
}

var login = function(callback) {
  var studioUrl = $('#StudioUrl').val();
  var studioKey = $('#StudioKey').val()
  var studioSecret = $('#StudioSecret').val();
  atxDecrypt(studioSecret, function(decryptedSecret) {
    ga = new Gallery(studioUrl, studioKey, decryptedSecret);
    callback();
  });
}

var getApps = function(gallery, callback) {
  gallery.getSubscriptionWorkflows(function(workflows) {
    callback(workflows);
  }, function(err) {
    console.log(err);
    var messageObj = {
      message: "Login Error: " + err.responseJSON.message,
      timeout: 5000,
      multiline: true
    }
    messages.show(messageObj);
  });
}

var setWorkflowUI = function(gallery, id, callback) {
  gallery.getAppQuestions(id, function(q) {
    $('#workflowInterface').html('');
    for (var i = 0; i < q.length; i++) {
      var question = q[i];
      $('#workflowInterface').append(getQuestionUI(question, i));
      if (question.type == "QuestionListBox" && question.multiple == "False") {
        var root = document.getElementById(i+"select");
        var nativeSelect = root.querySelector('.mdc-select__native-control');
        var select = new mdc.select.MDCSelect(root);
      } else if (question.type == "QuestionRadioGroup") {
        mdc.radio.MDCRadio.attachTo(document.getElementById(i+'radio'));
      } else if (question.type == "QuestionDate") {
        const input = document.getElementById(i);
        const picker = new MaterialDatetimePicker()
          .on('submit', (val) => {
            input.value = val.format("DD/MM/YYYY");
            $('#'+i).parent().addClass('mdc-text-field--upgraded');
            $('#'+i).next().addClass('mdc-floating-label--float-above');
          });
        input.addEventListener('focus', () => picker.open());
        mdc.textField.MDCTextField.attachTo(document.getElementById(i+'text'));
      } else {
        if(document.getElementById(i+'text')) {
          mdc.textField.MDCTextField.attachTo(document.getElementById(i+'text'));
        }
      }
    }
    callback();
  }, function(err) {
    console.log(err);
    var messageObj = {
      message: "App UI Error: " + err.responseJSON.message,
      timeout: 5000,
      multiline: true
    }
    messages.show(messageObj);
  });
}

var getQuestionUI = function(question, id) {
  var html = "";
  if (question.type == "QuestionListBox" && question.multiple == "False") {
    var options = question.items;
    html += `
      <div class="mdc-form-field">
        <div id="`+id+`select" class="mdc-select questions">
            <select class="mdc-select__native-control response" id="`+id+`" data-name="`+question.name+`">
            <option value=""></option>`
    for (var i=0; i < options.length; i++) {
      html += `<option value="`+options[i].value+`">`+options[i].key+`</option>`
    }
    html += `</select>
          <div class="mdc-select__label">`+question.description+`</div>
          <div class="mdc-select__bottom-line"></div>
        </div>
      </div>`
  } else if (question.type == "QuestionRadioGroup") {
    //Radio selection
    html += `
    <div class="mdc-form-field">

      <div class="mdc-radio" id="`+id+`radio">
        <input class="mdc-radio__native-control response" type="radio" id="`+id+`" data-name="`+question.name+`" name="radio"`
    if (question.value == "True") {
      html += " checked"
    }
    html +=`>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
      <label id="`+id+`label" for="`+id+`">`+question.description+`</label>
    </div>
    `
  } else if (question.type == "QuestionNumericUpDown") {
    var upgraded = float = value = "";
    if (question.value && question.value != "") {
      upgraded = " mdc-text-field--upgraded";
      float = " mdc-floating-label--float-above";
      value = ' value="'+question.value+'"'
    }
    html += `
    <div class="mdc-form-field">
      <div class="mdc-text-field`+upgraded+`" id="`+id+`text">
        <input type="text" id="`+id+`" class="mdc-text-field__input response"`+value+` data-name="`+question.name+`">
        <label class="mdc-floating-label`+float+`" for="`+id+`">`+question.description+`</label>
        <div class="mdc-line-ripple"></div>
      </div>
    </div>
    `
  } else if (question.type == "QuestionTextBox") {
    //text box
    var type = upgraded = float = value = "";
    var desc = question.description;
    desc = desc.toLowerCase();
    if (desc.indexOf('password') > -1 || desc.indexOf('secret') > -1 ) {
      type = "password";
    } else {
      type = "text";
    }
    if (question.value && question.value != "") {
      upgraded = " mdc-text-field--upgraded";
      float = " mdc-floating-label--float-above";
      value = ' value="'+question.value+'"'
    }
    html += `
    <div class="mdc-form-field">
      <div class="mdc-text-field`+upgraded+`" id="`+id+`text">
        <input type="`+type+`" id="`+id+`" class="mdc-text-field__input response"`+value+` data-name="`+question.name+`">
        <label class="mdc-floating-label`+float+`" for="`+id+`">`+question.description+`</label>
        <div class="mdc-line-ripple"></div>
      </div>
    </div>
    `
  } else if (question.type == "QuestionDate") {
    //Date selector
    var upgraded = float = value = "";
    if (question.value && question.value != "") {
      upgraded = " mdc-text-field--upgraded";
      float = " mdc-floating-label--float-above";
      value = ' value="'+question.value+'"'
    }
    html += `
    <div class="mdc-form-field">
      <div class="mdc-text-field`+upgraded+`" id="`+id+`text">
        <input type="text" id="`+id+`" class="mdc-text-field__input c-datepicker-input response"`+value+` data-name="`+question.name+`">
        <label class="mdc-floating-label`+float+`" for="`+id+`">`+question.description+`</label>
        <div class="mdc-line-ripple"></div>
      </div>
    </div>
    `
  } else if (question.type == "QuestionBooleanGroup") {
    var value = "";
    if (question.value && question.value == "True") {
      value = ' checked';
    }
    html += `
    <div class="mdc-form-field">
      <div class="mdc-checkbox">
        <input type="checkbox"
               id="`+id+`"
              data-name="`+question.name+`"
               class="mdc-checkbox__native-control response"`+value+`/>
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark"
               viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path"
                  fill="none"
                  stroke="white"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      </div>

      <label for="`+id+`">`+question.description+`</label>
    </div>
    `
  } else if (question.type == "QuestionListBox" && question.multiple == "True") {
    html += `
      <div class="checkBoxGroup response" id=`+id+` data-name="`+question.name+`">
        <label>`+question.description+`</label>
    `
    for (var i = 0; i < question.items.length; i++) {
      var item = question.items[i];
      html += `
      <div class="mdc-form-field">
        <div class="mdc-checkbox">
          <input type="checkbox"
                 id="`+id+`-`+i+`"
                 class="mdc-checkbox__native-control" value="`+item.value+`"  data-name="`+item.key+`" />
          <div class="mdc-checkbox__background">
            <svg class="mdc-checkbox__checkmark"
                 viewBox="0 0 24 24">
              <path class="mdc-checkbox__checkmark-path"
                    fill="none"
                    stroke="white"
                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
            </svg>
            <div class="mdc-checkbox__mixedmark"></div>
          </div>
        </div>

        <label for="`+id+`-`+i+`">`+item.key+`</label>
      </div>
      `
    }
    html += `
      </div>
    `
  } else {
    //Catch all text box
    var upgraded = float = value = "";
    if (question.value && question.value != "") {
      upgraded = " mdc-text-field--upgraded";
      float = " mdc-floating-label--float-above";
      value = ' value="'+question.value+'"'
    }
    html += `
    <div class="mdc-text-field`+upgraded+`" id="`+id+`text">
      <input type="text" id="`+id+`" data-name="`+question.name+`" class="mdc-text-field__input"`+value+`>
      <label class="mdc-floating-label`+float+`" for="`+id+`">`+question.description+`</label>
      <div class="mdc-line-ripple"></div>
    </div>
    `
  }
  return html;
}

var setAlteryxConfig = function(studioUrl, studioKey, studioSecret, workflows, responses, annotation) {
  window.Alteryx.JsEvent(JSON.stringify({
    Event: 'GetConfiguration',
    Configuration: {
      Configuration: {
        StudioUrl: studioUrl,
        StudioKey: studioKey,
        StudioSecret: studioSecret,
        Workflow: workflows,
        Responses: responses
      },
      Annotation: annotation
    }
  }));
}

window.Alteryx.Gui = {
 SetConfiguration: function (currentToolConfiguration) {
   // Grab the values from the incoming tool configuration, and set the UI
   if (currentToolConfiguration && currentToolConfiguration.IsFirstConfig === false) {
     var studioUrl = currentToolConfiguration.Configuration.Configuration.StudioUrl;
     var studioKey = currentToolConfiguration.Configuration.Configuration.StudioKey;
     var studioSecret = currentToolConfiguration.Configuration.Configuration.StudioSecret;
     var workflow = currentToolConfiguration.Configuration.Configuration.Workflow;
     var signin = true;
     var uiConfig = currentToolConfiguration.Configuration.Configuration.Responses;
     if (studioUrl && studioUrl != "") {
       $('#StudioUrl').parent().addClass('mdc-text-field--upgraded');
       $('#StudioUrl').next().addClass('mdc-floating-label--float-above');
       $('#StudioUrl').val(studioUrl);
     } else {
       signin = false;
     }
     if (studioKey && studioKey != "") {
       $('#StudioKey').parent().addClass('mdc-text-field--upgraded');
       $('#StudioKey').next().addClass('mdc-floating-label--float-above');
       $('#StudioKey').val(studioKey);
     } else {
       signin = false;
     }
     if (studioSecret && studioSecret != "") {
       $('#StudioSecret').parent().addClass('mdc-text-field--upgraded');
       $('#StudioSecret').next().addClass('mdc-floating-label--float-above');
       $('#StudioSecret').val(studioSecret);
       $('#encryptedSecret').val('true');
     } else {
       signin = false;
     }
     if (signin) {
       $($('._mdc-stepper__step')[0]).addClass('_mdc-stepper__step--done');
       $($('._mdc-stepper__step')[1]).addClass('_mdc-stepper__step--active');
       login(function() {
         getApps(ga, function(apps) {
           for (var i = 0; i < apps.length; i++) {
             var app = apps[i];
             var option = "<option value='"+app.id+"'>"+app.metaInfo.name+"</option>";
             $('#workflows').append(option);
           }
           if (workflow && workflow != "") {
             $('#workflows option[value='+workflow+']').attr('selected','selected');
             $('#workflows').next().addClass('mdc-floating-label--float-above');
             setWorkflowUI(ga, $('#workflows').find(":selected").val(), function() {
               if (uiConfig && uiConfig != "") {
                 atxDecrypt(uiConfig, function(config) {
                   var responses = JSON.parse(config);
                   for (var i = 0; i < responses.length; i++) {
                     var response = responses[i];
                     var tag = $('[data-name="'+response.name+'"]')[0];
                     if ($(tag).is("div")) {
                       var checkboxes = JSON.parse(response.value);
                       for (var j=0; j<checkboxes.length; j++) {
                         var checkbox = $(tag).find('[value="'+checkboxes[j].key+'"]')[0];
                         $(checkbox).prop("checked", checkboxes[j].value);
                       }
                     } else if ($(tag).attr("type") == "radio" || $(tag).attr("type") == "checkbox"  ) {
                       $(tag).prop("checked", response.value);
                     } else {
                       $(tag).val(response.value);
                       $(tag).parent().addClass('mdc-text-field--upgraded');
                       $(tag).next().addClass('mdc-floating-label--float-above');
                     }
                   }
                 })
               }
             });
           }
         });
       });
     } else {
       $($('._mdc-stepper__step')[0]).addClass('_mdc-stepper__step--active');
     }
   }

   // Notify the Alteryx Designer you are done handling SetConfiguration
   // If you don’t do this, the GetConfiguration will not be called
   window.Alteryx.JsEvent(JSON.stringify({Event: 'SetConfiguration'}))
 },
 GetConfiguration: function () {
   var studioUrl = $('#StudioUrl').val();
   var studioKey = $('#StudioKey').val();
   var studioSecret = $('#StudioSecret').val();
   var encryptedSecret = $('#encryptedSecret').val();
   var workflows = $('#workflows').find(":selected").val()
   var responseArr = [];

   $('.response').each(function(i,tag) {
     var response = {
       "name": $(tag).attr("data-name"),
       "value": ""
     };

     if ($(tag).is("div")) {
       var values = [];
       $('.checkBoxGroup')
          .children('.mdc-form-field')
          .children('div')
          .children('input')
          .each(function(j,subtag) {
            var value = {
              "key": $(subtag).attr("value"),
              "value": $(subtag).prop("checked")
            }
            values.push(value);
          });
       response.value = JSON.stringify(values);
     } else if ($(tag).attr("type") == "radio" || $(tag).attr("type") == "checkbox"  ) {
       response.value = $(tag).prop("checked");
     } else {
       response.value = $(tag).val();
     }
     responseArr.push(response);
   });

   var responses = JSON.stringify(responseArr)
   atxEncrypt(responses, function(encResponses) {
     if (studioSecret && studioSecret != "" && encryptedSecret == 'false') {
       atxEncrypt(studioSecret, function(encSecret) {
         setAlteryxConfig(studioUrl, studioKey, encSecret, workflows, encResponses, 'Gallery: ' + studioUrl);
       });
     } else if (studioSecret && studioSecret != "" && encryptedSecret == 'true') {
       atxEncrypt(responses, function(encResponses) {
         setAlteryxConfig(studioUrl, studioKey, studioSecret, workflows, encResponses, 'Gallery: ' + studioUrl);
       });
     } else {
       setAlteryxConfig(studioUrl, studioKey, studioSecret, workflows, encResponses, '');
     }
   });
 }
}

$(document).ready(function() {
  $('#StudioUrl').on('focusout', function() {
    $('#StudioUrl').val(validateUrl($('#StudioUrl').val()));
  })
  $('#StudioSecret').on('focusout', function() {
    atxEncrypt($('#StudioSecret').val(), function(encrypted) {
      $('#StudioSecret').val(encrypted);
      $('#encryptedSecret').val('true');
    });
  });
  $('#login').on('click', function() {
    $($('._mdc-stepper__step')[0]).addClass('_mdc-stepper__step--done');
    $($('._mdc-stepper__step')[0]).removeClass('_mdc-stepper__step--active');
    $($('._mdc-stepper__step')[1]).addClass('_mdc-stepper__step--active');
    login(function() {
      getApps(ga, function(apps) {
        for (var i = 0; i < apps.length; i++) {
          var app = apps[i];
          var option = "<option value='"+app.id+"'>"+app.metaInfo.name+"</option>";
          $('#workflows').append(option);
        }
      });
    });
  });
  let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
  document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
  var root = document.getElementById('app-select');
  var nativeSelect = root.querySelector('.mdc-select__native-control');
  var select = new mdc.select.MDCSelect(root);
  root.addEventListener('change', function() {
    //console.log($('#workflows').find(":selected").val());
    setWorkflowUI(ga, $('#workflows').find(":selected").val(), function() {

    });
  });

  $(document).on("click", "._mdc-stepper__step", function(args) {
    // if the title or label was clicked, toggle the active state
    if(args.target.classList.contains('_mdc-stepper__step__title') || args.target.classList.contains('_mdc-stepper__step__label')){
      $(this).toggleClass("_mdc-stepper__step--active");
    }
  });
});