{% extends '../layout/admin.html' %}

{% block html_title %}{{ customTitle(t('Importer management')) }}{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('Importer management') }}</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'importer'} %}
    </div>
    <div class="col-md-9">

      <!-- Flash message for success -->
      {% set smessage = req.flash('successMessage') %}
      {% if smessage.length %}
      <div class="alert alert-success">
        {% for e in smessage %}
          {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Flash message for error -->
      {% set emessage = req.flash('errorMessage') %}
      {% if emessage.length %}
      <div class="alert alert-danger">
        {% for e in emessage %}
        {{ e }}<br>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Importer management forms -->
      <form action="/_api/admin/settings/importer" method="post" class="form-horizontal" id="importerSettingForm" role="form"
          data-success-messaage="更新しました">
        <fieldset>
          <!-- esa importer -->
          <div class="form-group">
            <legend>{{ t('importer_management.esa_settings.title') }}</legend>
            <div class="form-group">
              <label for="settingForm[importer:esa:team_name]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.team_name') }}</label>
              <div class="col-xs-6">
                <input class="form-control" type="text" name="settingForm[importer:esa:team_name]" value="{{ settingForm['importer:esa:team_name'] | default('') }}">
              </div>
            </div>
            <div class="form-group">
              <label for="settingForm[importer:esa:access_token]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.access_token') }}</label>
              <div class="col-xs-6">
                <input class="form-control" type="text" name="settingForm[importer:esa:access_token]" value="{{ settingForm['importer:esa:access_token'] | default('') }}">
              </div>
            </div>
          </div>

          <div class="form-group">
            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
            <div class="col-xs-offset-3 col-xs-6">
              <button id="testConnectionToEsa" type="button" class="btn btn-primary" data-action="/_api/admin/import/esa"
                  data-success-message="Import posts from esa success." data-error-message="Import posts from esa failed.">
                {{ t("importer_management.import") }}
              </button>
              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
                {{ t('Update') }}
              </button>
              <span class="col-xs-offset-1">
                <button id="importFromEsa" type="button" class="btn btn-default" data-action="/_api/admin/import/testEsaAPI"
                    data-success-message="Test connection to esa success." data-error-message="Test connection to esa failed.">
                  {{ t("importer_management.test_connection") }}
                </button>
              </span>
            </div>
          </div>
        </fieldset>
      </form>
      <form action="/_api/admin/settings/importer" method="post" class="form-horizontal" id="importerSettingForm" role="form"
          data-success-messaage="更新しました">
        <fieldset>
          <!-- qiita:team importer -->
          <div class="form-group">
            <legend>{{ t('importer_management.qiita_settings.title') }}</legend>
            <div class="form-group">
              <label for="settingForm[importer:qiita:team_name]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.team_name') }}</label>
              <div class="col-xs-6">
                <input class="form-control" type="text" name="settingForm[importer:qiita:team_name]" value="{{ settingForm['importer:qiita:team_name'] | default('') }}">
              </div>
            </div>
            <div class="form-group">
              <label for="settingForm[importer:qiita:access_token]" class="col-xs-3 control-label">{{ t('importer_management.qiita_settings.access_token') }}</label>
              <div class="col-xs-6">
                <input class="form-control" type="text" name="settingForm[importer:qiita:access_token]" value="{{ settingForm['importer:qiita:access_token'] | default('') }}">
              </div>
            </div>
          </div>

          <div class="form-group">
            <input type="hidden" name="_csrf" value="{{ csrf() }}" />
            <div class="col-xs-offset-3 col-xs-6">
              <button id="testConnectionToEsa" type="button" class="btn btn-primary" data-action="/_api/admin/import/qiita"
                  data-success-message="Import posts from qiita:team success." data-error-message="Import posts from qiita:team failed.">
                {{ t("importer_management.import") }}
              </button>
              <button type="submit" class="btn btn-secondary">{# the first element is the default button to submit #}
                {{ t('Update') }}
              </button>
              <span class="col-xs-offset-1">
                <button id="importFromQiita" type="button" class="btn btn-default" data-action="/_api/admin/import/testQiitaAPI"
                    data-success-message="Test connection to qiita:team success." data-error-message="Test connection to qiita:team failed.">
                  {{ t("importer_management.test_connection") }}
                </button>
              </span>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

</div>

<script>
  /**
   * show flash message
   */
  function showMessage(formId, msg, status) {
    $('#' + formId + ' .alert').remove();

    if (!status) {
      status = 'success';
    }
    var $message = $('<p class="alert"></p>');
    $message.addClass('alert-' + status);
    $message.html(msg.replace('\n', '<br>'));
    $message.insertAfter('#' + formId + ' legend');

    if (status == 'success') {
      setTimeout(function()
      {
        $message.fadeOut({
          complete: function() {
            $message.remove();
          }
        });
      }, 5000);
    }
  }

  /**
   * Post form data and process UI
   */
  function postData(form, button, action, success_msg = "成功しました", error_msg = "エラーが発生しました") {
    var id = form.attr('id');
    button.attr('disabled', 'disabled');
    var jqxhr = $.post(action, form.serialize(), function(data)
      {
        if (!data.status) {
          showMessage(id, `${error_msg} ${data.message}`, 'danger');
        }
        else {
          showMessage(id, success_msg);
        }
      })
      .fail(function() {
        showMessage(id, "エラーが発生しました", 'danger');
      })
      .always(function() {
        button.prop('disabled', false);
      });
    return false;
  }

  /**
   * Handle button
   */
  $('#testConnectionToEsa, #importFromEsa').each(function() {
    var $form = $('#importerSettingForm');
    var $button = $(this);
    var $action = $button.attr('data-action');
    var $success_msg = $button.attr('data-success-message');
    var $error_msg = $button.attr('data-error-message');
    $button.click(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
  });

  /**
   * Handle submit button
   */
  $('#importerSettingForm').each(function() {
    var $form = $(this);
    var $button = $("#importerSettingForm input[type='submit']");
    var $action = $form.attr('action');
    var $success_msg = $button.attr('data-success-message');
    var $error_msg = $button.attr('data-error-message');
    $form.submit(function() { return postData($form, $button, $action, $success_msg, $error_msg) });
  });

</script>

{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}