import { Pipeline } from '@ephox/agar';
import { LegacyUnit } from '@ephox/mcagar';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import ScriptLoader from 'tinymce/core/api/dom/ScriptLoader';
import { Editor } from 'tinymce/core/api/Editor';
import EditorManager from 'tinymce/core/api/EditorManager';
import JqueryIntegration from 'tinymce/core/JqueryIntegration';
import PluginManager from 'tinymce/core/api/PluginManager';
import ViewBlock from '../module/test/ViewBlock';
import ThemeManager from 'tinymce/core/api/ThemeManager';
import Delay from 'tinymce/core/api/util/Delay';
import Tools from 'tinymce/core/api/util/Tools';
import Theme from 'tinymce/themes/modern/Theme';
import { UnitTest } from '@ephox/bedrock';

declare const window: any;

UnitTest.asynctest('browser.tinymce.core.JqueryIntegrationTest', function() {
  var success = arguments[arguments.length - 2];
  var failure = arguments[arguments.length - 1];
  var suite = LegacyUnit.createSuite();
  var viewBlock = ViewBlock();
  var $;

  Theme();

  var setup = function () {
    viewBlock.attach();
    viewBlock.update(
      '<textarea id="elm1"></textarea>' +
      '<textarea id="elm2"></textarea>' +
      '<textarea id="elm3">Textarea</textarea>'
    );
  };

  var loadJquery = function (done) {
    var script = document.createElement('script');
    script.src = '/project/js/tinymce/skins/lightgray/node_modules/jquery/dist/jquery.min.js';
    script.onload = function () {
      script.parentNode.removeChild(script);
      $ = window.jQuery.noConflict(true);
      JqueryIntegration({ tinymce: EditorManager, jQuery: $ });
      done();
    };
    document.body.appendChild(script);
  };

  suite.asyncTest('Setup editors', function (_, done) {
    $(function () {
      $('#elm1,#elm2').tinymce({
        skin_url: '/project/js/tinymce/skins/lightgray',
        init_instance_callback: function () {
          var ed1 = EditorManager.get('elm1'), ed2 = EditorManager.get('elm2');

          // When both editors are initialized
          if (ed1 && ed1.initialized && ed2 && ed2.initialized) {
            done();
          }
        }
      });
    });
  });

  suite.test("Get editor instance", function () {
    LegacyUnit.equal($('#elm1').tinymce().id, 'elm1');
    LegacyUnit.equal($('#elm2').tinymce().id, 'elm2');
    LegacyUnit.equal($('#elm3').tinymce(), null);
  });

  suite.test("Get contents using jQuery", function () {
    EditorManager.get('elm1').setContent('<p>Editor 1</p>');

    LegacyUnit.equal($('#elm1').html(), '<p>Editor 1</p>');
    LegacyUnit.equal($('#elm1').val(), '<p>Editor 1</p>');
    LegacyUnit.equal($('#elm1').attr('value'), '<p>Editor 1</p>');
    LegacyUnit.equal($('#elm1').text(), 'Editor 1');
  });

  suite.test("Set contents using jQuery", function () {
    $('#elm1').html('Test 1');
    LegacyUnit.equal($('#elm1').html(), '<p>Test 1</p>');

    $('#elm1').val('Test 2');
    LegacyUnit.equal($('#elm1').html(), '<p>Test 2</p>');

    $('#elm1').text('Test 3');
    LegacyUnit.equal($('#elm1').html(), '<p>Test 3</p>');

    $('#elm1').attr('value', 'Test 4');
    LegacyUnit.equal($('#elm1').html(), '<p>Test 4</p>');
  });

  suite.test("append/prepend contents using jQuery", function () {
    EditorManager.get('elm1').setContent('<p>Editor 1</p>');

    $('#elm1').append('<p>Test 1</p>');
    LegacyUnit.equal($('#elm1').html(), '<p>Editor 1</p>\n<p>Test 1</p>');

    $('#elm1').prepend('<p>Test 2</p>');
    LegacyUnit.equal($('#elm1').html(), '<p>Test 2</p>\n<p>Editor 1</p>\n<p>Test 1</p>');
  });

  suite.test("Find using :tinymce selector", function () {
    LegacyUnit.equal($('textarea:tinymce').length, 2);
  });

  suite.test("Set contents using :tinymce selector", function () {
    $('textarea:tinymce').val('Test 1');
    LegacyUnit.equal($('#elm1').val(), '<p>Test 1</p>');
    LegacyUnit.equal($('#elm2').val(), '<p>Test 1</p>');
    LegacyUnit.equal($('#elm3').val(), 'Textarea');
  });

  suite.test("Get contents using :tinymce selector", function () {
    $('textarea:tinymce').val('Test get');
    LegacyUnit.equal($('textarea:tinymce').val(), '<p>Test get</p>');
  });

  suite.test("applyPatch is only called once", function () {
    var options = {}, oldValFn;

    $('#elm1').tinymce(options);

    oldValFn = $.fn.val = function () {
      // no-op
    };

    $('#elm2').tinymce(options);

    LegacyUnit.equal($.fn.val, oldValFn);
  });

  loadJquery(function () {
    setup();
    Pipeline.async({}, suite.toSteps({}), function () {
      EditorManager.remove();
      viewBlock.detach();
      success();
    }, failure);
  });
});

