import React from 'react';
import Modularity from 'modularity-front';
import './Filter.css';
import CKEditor from 'ckeditor4-react';
// import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
CKEditor.editorUrl = 'https://cdn.ckeditor.com/4.11.4/full-all/ckeditor.js';

const Module = Modularity.Module;


class Editor extends Modularity.Module {
	constructor(props){
		super(props);
	    this.state = {
	      ...props.filter,
	      value:''
	    }
	}

	render(){
	    
		return(
			<div className={this.className.value}>
				<span>{this.Name.value}</span>
				<CKEditor
                    // editor={ ClassicEditor }
                    data={this.data.value}
                    onInit={ editor => {
                        // You can store the "editor" and use when it is needed.
                        // console.log( 'Editor is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = event.editor.getData();
                        // console.log( { event, editor, data } );
                        this.onChange.set(data);
                    } }
                    onBlur={ editor => {
                        // console.log( 'Blur.', editor );
                    } }
                    onFocus={ editor => {
                        // console.log( 'Focus.', editor );
                    } }
                />
	    	</div>
		)
	}
}

Editor.Inputs = {
      data:{
        type:Module.Types.Object
      },
      Name: {
      	type: Module.Types.Text
      },
      className: {
      	type: Module.Types.Text
      }
}

Editor.Outputs = {
      onChange:{}
}
Editor.Category = 'Nikatlas'



export default Editor;
