/*
 Wrapper around react-codemirror to handle server-side rendering issues.

 @copyright (c) Copyright 2013-2016 Dorian Pula
 @license AGPL v3
 @author Dorian Pula [dorian.pula@amber-penguin-software.ca]
 */


import React from "react";

/*
 Remember to install codemirror before react-codemirror,
 see issue https://github.com/JedWatson/react-codemirror/issues/34
 Also add in the themes in the CSS to get proper theming support.
 */
import CodeMirror from "react-codemirror";
// TODO: Figure out how to work around this import.

// Workaround for rendering CodeMirror server-side
if (typeof(navigator) !== 'undefined') {
    require("codemirror/mode/markdown/markdown");
}


class CodeEditor extends React.Component {
    static get propTypes() {
        return {
            code: React.PropTypes.string,
            language: React.PropTypes.string,
            theme: React.PropTypes.string,
        }
    }

    render() {
        let code = this.props.code;
        let options = {mode: this.props.language, theme: this.props.theme};

        // TODO: Improve workaround when rendering React CodeMirror on the server.
        // TODO: Add patch to resolve issue at https://github.com/JedWatson/react-codemirror/issues
        // TODO: Resolve issues with rendering Code Mirror componnets.
        return (<CodeMirror value={ code } onChange={ this.handleUpdateCode } options={ options }/>);
    }
}


export {CodeEditor};
