import React, {Component} from "react";
import $ from "jquery";

class Editor extends Component {
    constructor(props) {
        super(props);
        this.changeEditorState = this.changeEditorState.bind(this);
        this.saveChanges = this.saveChanges.bind(this);
        this.state = {
            value: this.props.value
        }
    }

    changeEditorState(event) {
        let caller = $(event.target).closest(".substance-editor");
        let editor_is_mutable = caller.hasClass("editor-mutable")
        let editor_is_active = caller.hasClass("item-active")
        let form_element = caller.find("input, textarea");

        if (!editor_is_active && editor_is_mutable) {
            caller.addClass("item-active");
            form_element.focus();
        }

        if (editor_is_active) {
            caller.removeClass("item-active");
        }
    }

    saveChanges(event) {
        let caller = $(event.target).closest(".substance-editor");
        let form_element = caller.find("input, textarea");
        form_element.text(form_element.val());
        this.props.onValueChange(form_element.val());
        this.setState({
            value: form_element.val()
        })
    }

    getClass() {
        if (this.props.textArea) {
            return "richtext";
        }
        return "text";
    }

    getEditField() {
        if (this.props.textArea) {
            return (
                    <textarea id="somefield" defaultValue={this.state.value}/>)

        }
        return (
            <input id="somefield" type="text" defaultValue={this.state.value}/>
        )
    }

    render() {
        return (
            <div className={'substance-editor editor-type-' + this.getClass() + ' editor-mutable'}
                 onClick={this.changeEditorState}>
                <div className={this.props.textArea ? 'editor-value substance-richtext' : 'editor-value'}>
                    {this.state.value}
                </div>

                <div className="editor-form field-entry entry-unlabeled">
                    <div className="field-container">
                        {this.getEditField()}
                    </div>
                </div>

                <ul className="editor-actions substance-toolchain">
                    <li className="toolchain-link">
                        <button title="" className="primary-action action-icon action-size-mini action-cancel">Cancel
                            change
                        </button>
                    </li>

                    <li className="toolchain-link">
                        <button title="" className="primary-action action-icon action-size-mini action-save"
                                onClick={this.saveChanges}>
                            Save change
                        </button>
                    </li>
                </ul>
            </div>
        )
    }
}

export default Editor;