import React, { Component } from 'react';
import styles from './Home.css';
import axios from 'axios';
import jarvis from 'file!../jarvis-bkrd.png';
import RaisedButton from 'material-ui/lib/raised-button';
import ActionRecordVoiceOver from 'material-ui/lib/svg-icons/action/record-voice-over';
import Modal from 'react-modal';
import VisitorModal from './VisitorModal';
import Motion from '../sensors/motion';
import * as Camera from '../sensors/camera';
import fs from 'fs';
import io from 'socket.io-client';
let socket = io(`http://jarviscsg.herokuapp.com:80`);

export default class Home extends Component {

  constructor(props) {
    super(props);

    this.state = {
      visitors: [],
      modalIsOpen: false
    }
  }

  closeModal = () => {
        this.setState({ modalIsOpen: false});
    }

  checkIn = () => {
    let self = this;
    axios.get('http://jarviscsg-api.herokuapp.com/api/schedules/now').then(function(response) {
      if (response.data.length > 0) {
        self.setState({
          visitors: response.data,
          modalIsOpen: true
        });
      } else {

        // need to create proper data object for office manager // jeff
        let data = {
          firstName: "someone",
          userName: "erichardson"
        };
        self.notifyEmployee(data);
      }
    });
  }

  notifyEmployee = (data) => {
    responsiveVoice.speak("Thank you. I will let " + data.firstName + "know you are here.", "UK English Male", {rate: 0.8});
    Camera.takePicture(data);
    this.closeModal();
  }

  render() {

    return (
      <div>
        <div className={styles.container}>
        <img src="./img/Cardinal.png" alt="Cardinal" className={styles.logo} />

          <RaisedButton
            backgroundColor="#218EC1"
            className={styles.button}
            style={style}
            label="Check In"
            labelColor="#FFF"
            onClick={this.checkIn}
            icon={<ActionRecordVoiceOver />}
          />

          <VisitorModal
            open={this.state.modalIsOpen}
            close = {this.closeModal}
            visitors = {this.state.visitors}
            notifyEmployee = {this.notifyEmployee} />
        </div>
      </div>
    );
  }
}

const style = {
  position: 'fixed',
  bottom: '20px',
  left: '200px',
  height: '60px',
  width: '400px'
}

@@ -1088,21 +1088,247 @@
  else %7B%0A
-%0A
     
+    console.log(%22notifying mangaer%22)%0A        self.notifyManager();%0A      %7D%0A    %7D);%0A  %7D%0A%0A  notifyManager = () =%3E %7B%0A%0A    responsiveVoice.speak(%22Thank you. I will let someone know you are here.%22, %22UK English Male%22, %7Brate: 0.8%7D);%0A%0A
     // n
@@ -1387,20 +1387,16 @@
 // jeff%0A
-    
     let 
@@ -1404,20 +1404,16 @@
 ata = %7B%0A
-    
       fi
@@ -1438,20 +1438,16 @@
 ,%0A      
- 
-   
 userName
@@ -1466,67 +1466,66 @@
 on%22%0A
-    
     %7D;%0A
+%0A
     
-    self.notifyEmployee(data);%0A      %7D%0A    %7D
+Camera.takePicture(data);%0A    this.closeModal(
 );%0A 

add notify manager call on home.js