import React from 'react';
import {inject, observer} from 'mobx-react';
import {Link} from 'react-router';
import {GridList, GridTile} from 'material-ui';

@inject('appstate')
@observer
export default class AgentPhoto extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {

    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.agentStore = props.appstate.agent;
  }

  handleId = (event, index, value) => {

      const file = event.nativeEvent.target.files[0];
      const allowedFile = ['jpg', 'jpeg', 'png', 'gif'];

      const [ext] = file.name.split('.').reverse();

      if (!allowedFile.includes(ext.toLowerCase())) {

      }

      this.http.upload(file).then((response) => {
        this.authStore.userProfile.agent.id_photo = "/api/v1"+response.path;
      });
    };

  handlePassport = (event, index, value) => {

    const file = event.nativeEvent.target.files[0];
    const allowedFile = ['jpg', 'jpeg', 'png', 'gif'];

    const [ext] = file.name.split('.').reverse();

    if (!allowedFile.includes(ext.toLowerCase())) {
      
    }

    this.http.upload(file).then((response) => {
      this.authStore.userProfile.agent.passport_photo = "/api/v1"+response.path;
    });
    // console.log(event.nativeEvent);
  };

  componentDidMount() {
    
  } 

  render() {

    return (
        <div>
          <div style={{padding: 5}}>
            <div className="row">
                <div className="col s12 m6 l6">
                    <p className="label-form">ID Photo</p>
                    <input 
                      type="file" 
                      onChange={this.handleId} 
                      accept="image/*" 
                    />
                </div>
                <div className="col s12 m6 l6">
                    <p className="label-form">Passport Photo</p>
                    <input 
                      type="file" 
                      onChange={this.handlePassport} 
                      accept="image/*" 
                    />
                </div>
            </div>
            <div className="row" style={{minHeight:250}}>
              <div className="col s12 m6 l6">
                <div className="row">
                  <h4>
                    ID View
                  </h4>
                </div>
                <div className="row">
                  <img src={this.http.appendImagePath(this.authStore.userProfile.agent.id_photo)} width="100%" style={{marginBottom:'10px'}}/>
                </div>
              </div>

              <div className="col s12 m6 l6">
                <div className="row">
                  <h4>
                    Passport View
                  </h4>
                </div>
                <div className="row">
                  <img src={this.http.appendImagePath(this.authStore.userProfile.agent.passport_photo)} width="100%" style={{marginBottom:'10px'}}/>
                </div>
              </div>
            </div>
          </div>
        </div>        
    );
  }
}
