import React from 'react';
import ReactDOM from 'react-dom';
import RaisedButton from 'material-ui/RaisedButton';
import newId from '../utils/NewId';
import Webcam from 'react-webcam';

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: '',
      mobileImagePreviewUrl: null,
      reset: true
    };
  }

  _handleImageChange(e) {
    e.preventDefault();

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

    reader.onloadend = () => {
      if (this.props.getScreenshotSrc) {
      this.props.getScreenshotSrc(reader.result);
    }

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

    reader.readAsDataURL(file)
  }

  setRef = (webcam) => {
    this.webcam = webcam;
  }

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();

    this.setState({
      reset: false,
      mobileImagePreviewUrl: imageSrc
    });

    if (this.props.getScreenshotSrc) {
      this.props.getScreenshotSrc(imageSrc);
    }
  };

  onCapture = () => {

  }

  onReset = () => {
    this.setState({
      reset: true,
      mobileImagePreviewUrl: null
    });
    this.props.getScreenshotSrc(null);

  }

  componentWillUpdate(nextProps, nextState) {

  }

  componentWillMount() {
    this.id = newId();
  }

  render() {
    const isMobile = window.innerWidth <= 1025;

    let hide = this.state.reset ? '' : 'hide';

    if (!isMobile) {
      let {imagePreviewUrl} = this.state;
      let $imagePreview = null;
      if (imagePreviewUrl) {
        $imagePreview = (<img src={imagePreviewUrl} />);
      } else {
        $imagePreview = (<div className="preview-text"></div>);
      }

      return (
        <div className="preview-component">
          <label htmlFor={this.id} className="custom-file-upload">
            Choose File
          </label>
          <input id={this.id}
                type="file"
                onChange={(e) => this._handleImageChange(e)} />
          <div className={this.state.file ? 'img-preview text-center' : ''}>
            {$imagePreview}
          </div>
        </div>
      )
    }

    if (isMobile) {
      return (
        <div className="webcam-container" key={this.id}>
          <div className={`webcam-component ${hide}`}>
            <Webcam audio={false}
                    onUserMedia={() => this.onCapture}
                    ref={this.setRef}
                    screenshotFormat="image/jpeg" />
          </div>

          {!this.state.reset && (
            <div className="webcam-preview">
              <img src={this.state.mobileImagePreviewUrl} alt="Preview"/>
            </div>
          )}

          <RaisedButton label="Retake"
                        className="retake-btn"
                        onClick={this.onReset}
                        primary={true} />

          <button onClick={this.capture}>
            <i className="material-icons">photo_camera</i>
          </button>
        </div>
      )
    }
  }
}

export default UploadImage;
@@ -1478,31 +1478,8 @@
 ';%0A%0A
-    if (!isMobile) %7B%0A  
     
@@ -1514,18 +1514,16 @@
 .state;%0A
-  
     let 
@@ -1544,26 +1544,24 @@
 = null;%0A    
-  
 if (imagePre
@@ -1569,34 +1569,32 @@
 iewUrl) %7B%0A      
- 
- 
 $imagePreview = 
@@ -1630,18 +1630,16 @@
 %3E);%0A    
-  
 %7D else %7B
@@ -1641,26 +1641,24 @@
 lse %7B%0A      
- 
- 
 $imagePrevie
@@ -1705,17 +1705,36 @@
 %3E);%0A
-  
     %7D%0A%0A
+    if (!isMobile) %7B%0A
     
@@ -1944,16 +1944,17 @@
         
+ 
 type=%22fi
@@ -1957,16 +1957,17 @@
 =%22file%22%0A
+ 
         
@@ -2519,16 +2519,374 @@
 %3C/div%3E%0A%0A
+          %3Cinput type=%22file%22%0A                 capture=%22camera%22%0A                 accept=%22image/*%22%0A                 id=%22cameraInput%22%0A                 name=%22cameraInput%22%0A                 onChange=%7B(e) =%3E this._handleImageChange(e)%7D /%3E /%3E%0A          %3Cdiv className=%7Bthis.state.file ? 'img-preview text-center' : ''%7D%3E%0A            %7B$imagePreview%7D%0A          %3C/div%3E%0A%0A
         

Fix attempt for iOS