import React, {Component} from 'react';
import './img.css';
import NavBart from "./NavBart";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
// Import Brace and the AceEditor Component
import brace from 'brace';
import AceEditor from 'react-ace';
// Import a Mode (language)
import 'brace/mode/java';
// Import a Theme (okadia, github, xcode etc)
import 'brace/theme/github';

class FrontPage extends Component
{
    state = {
        file: '',
        imagePreviewUrl: '',
        text: ''
    };
    _handleSubmit(e) {
      e.preventDefault();


      console.log('handle uploading-', this.state.file);
    }

    _handleImageChange(e) {
      e.preventDefault();

      let reader = new FileReader();
      let file = e.target.files[0];

      reader.onloadend = () => {
        this.setState({
          file: file,
          imagePreviewUrl: reader.result
        });
      }

      reader.readAsDataURL(file)
    }

    _handleCodeTextChange(newText) {
        this.setState({text: newText});
    }

    _handleCodeTextSubmit(e) {

    }

    render() {
      let {imagePreviewUrl} = this.state;
      let $imagePreview = null;
      if (imagePreviewUrl) {
        $imagePreview = (<img src={imagePreviewUrl} />);
      } else {
        $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
      }

      return (
        <div className="previewComponent">
            <Grid container
                  direction="row"
                  alignItems="stretch"
            >
                <Grid item className="gridItem">
                    <form onSubmit={(e)=>this._handleSubmit(e)}>
                        <input className="fileInput"
                               type="file"
                               onChange={(e)=>this._handleImageChange(e)} />
                        <button className="submitButton"
                                type="submit"
                                onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
                    </form>
                    <div className="imgPreview">
                        {$imagePreview}
                    </div>
                </Grid>
                <Grid item className="gridItem">
                    <form
                        id="codeTextField"
                        label="You can also directly insert code here">
                        <TextField
                            multiline
                            className="codeInput"
                            onChange={(e) => this._handleCodeTextChange(e)}/>
                        <button className="submitButton"
                                id="submitCodeButton"
                                type="submit"
                                onClick={(e) => this._handleCodeTextSubmit(e)}>Resubmit Code</button>
                    </form>
                </Grid>
            </Grid>
        </div>
      )
    }
}

export default FrontPage;