@extends('layouts.app2')

@push('head')
<!-- Styles -->
<!-- <link href="{{ asset('css/editorvis.css') }}" rel="stylesheet"> -->
<!-- Scripts -->
<script src="/../../cove/vis/umd/react.production.min.js" crossorigin></script>
  <script src="/../../cove/vis/umd/react-dom.production.min.js" crossorigin></script>
  <script src="/../../cove/vis/umd/react-is.production.min.js" crossorigin></script>

  <script src="/../../cove/vis/umd/styled-components.min.js"></script>

@endpush

@section('content')


 <script>

     var obj, dbParam, xmlhttp, allwords,collocations, x, txt = "Keywords in DB:", dbwords=[];dropdown=1;
     window.collocaidversion="0.3";
     function getCollocations()
{


xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        collocations = JSON.parse(this.responseText);

    }
};
xmlhttp.open("GET", "json_demo_db_tiny.php", true);
//xmlhttp.open("GET", "collocations.php?x="+ word, true);
xmlhttp.send();

}


     xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        allwords = JSON.parse(this.responseText);
       for (x in allwords) {
            txt += allwords[x].Base +", ";
        }
       // document.getElementById("demo").innerHTML = txt;
		allwords.forEach(function (element, index, array)
		{
			dbwords.push(element.Base);
			//console.log(element.Base);

		});
		//console.log(dbwords.indexOf("research1") > -1);
		getCollocations();
		//test

    }
};
xmlhttp.open("GET", "words.php", true);
xmlhttp.send();




     </script>










                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

              <div class="card">
                <div id="container">
                          <div id="left-column" class='editor'>
                 				 <textarea ></textarea>
                          </div>
                          <div id="collocaid-vis" class="collocaid-vis"></div>
                          <div> <div id="info" class="extrainfo">

                          </div>

              </div>
                      </div>

</div>




  <!--p style="color:blue;">Please take care to adapt examples to your own text.</p-->


  <script type="text/javascript" src="vis/collocaid-vis.js"></script>
  <script src="jsv3vis/tinymce/tinymce.js"></script>
<script>

function inserttext(text)
{
//editor.execCommand('mceInsertContent', false, text);
tinymce.activeEditor.insertContent(tinymce.activeEditor.dom.encode(text));
tinymce.activeEditor.insertContent(tinymce.activeEditor.dom.encode(" "));
tinymce.activeEditor.execCommand('mceSpellCheck');
tinymce.activeEditor.execCommand('mceSpellCheck');

//console.log(tinymce.activeEditor.selection.getNode().nodeName);

return false;

}


function suggestcollocations(method, text, success, failure)
{
  var words = text.match(this.getWordCharPattern());

  console.log(words);
  console.log(method);
  if(words!= null)
  {
  if (method == "spellcheck") {
    var suggestions = {};
    for (var i = 0; i < words.length; i++) {
    if(dbwords.indexOf(toLowerCase.words[i])> -1)
    {
      suggestions[words[i]] = [ words[i] + " (noun)",  words[i] + " (verb)" ];
      console.log(toLowerCase.words[i]);
     }
     else
     {
      console.log("No");
     }
    }
    success(suggestions);
  }
  }
  else
  {

    failure("The editor is empty, there is nothing to check");
  }
}

tinymce.init({
selector: "textarea",
min_height: 500,
branding: false, // change this value according to your HTML
plugins: "preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern help spellchecker about save",
toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat collocaidbutton',
menu: {
      file: {title: 'File', items: 'newdocument save1'},
      edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
      insert: {title: 'Insert', items: 'link media | template hr'},
      view: {title: 'View', items: 'fullscreen'},
      format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
      table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
      tools: {title: 'Tools', items: ' code'},
      help:{title:'Help', items:'help about'},
      collocaid:{title:'ColloCaid', items:'spellchecker dropdown vispanel'}
  },
setup: function(editor) {

    editor.on('init', function(e) {
     // editor.execCommand('mceFullScreen');
    });
  editor.on('keypress', function(e) {
       editor.selection.moveToBookmark(editor.selection.getBookmark());

  //console.log(e);
   });
    editor.on('click', function (e) {
    if(e.target.nodeName=="P")
    {
     var Table = document.getElementById("info");
  Table.innerHTML = "";
    }
  });


    },

    init_instance_callback: function (editor) {
 /* editor.on('click', function (e) {
    console.log('Element clicked:', e.target.nodeName);
  });*/
},

spellchecker_callback: function(method, text, success, failure)
{
  var words = text.match(this.getWordCharPattern());

 // console.log(words.length);
  //console.log(method);
  //console.log(success);
  //console.log(failure);
if(words!= null)
    {
  if (method == "spellcheck") {
    var suggestions = {};
    for (var i = 0; i < words.length; i++) {
    if(dbwords.indexOf(words[i].toLowerCase())> -1)
    {
    // console.log(words[i].toLowerCase());
    if(!collocations)
      getCollocations();
      suggestions[words[i]] = [ words[i]+" (noun)", words[i]+" (verb)", words[i]+" (ADV ADJ*)"  ];

     }

    }
    success(suggestions);
  }
  }
  else
  {
         failure("The editor is empty, there is nothing to check");
  }
},

});




</script>

















@endsection