import React from 'react';

import Modularity from 'modularity-front';
import {Icon,Input, Button ,Col,Row } from 'react-materialize';

import Editor from './UserInputs/Editor';
import Embed from './UserInputs/Embed';

let Module = Modularity.Module;

class TextEditor extends Module {
	constructor(props) {
		super(props);
		this.state = {
			mode: false
		}
		this.admin = this._mode === "admin" || this._mode === "normal";

	}

	click() {
		this.setState({
			mode : !this.state.mode
		})
	}

	change(v) {
		this.Text.update(v);
		this.onChange.set(v);
	}

	render() {
		let mode = localStorage.getItem('AdminMode') === "admin";

		return <React.Fragment>
			{this.state.mode && mode ? [
				<Editor data={this.Text.value} onChange={(v) => this.change(v)} key={0} />,
				<i className={'fa fa-close'} onClick={() => this.click()} key={1}></i>
			]
			: <Embed html={this.Text.value} onClick={mode ? (() => this.click()) : undefined} className={(mode ? 'pointer ' : '') + this.className.value}  />}
			{super.render()}
		</React.Fragment>;
	}
}

TextEditor.Inputs = {
	"Text": {
		type: Module.Types.Text,
		defaultValue: "Sample text with <b>bold</b> and <i>Italics</i>"
	},
	"className": {
		type: Module.Types.Text
	}
}

TextEditor.Outputs = {
	"onChange" : {}
}

TextEditor.Category = "Inputs"
export default TextEditor;