import React from 'react';
import {inject, observer} from 'mobx-react';
import {DatePicker, MenuItem, SelectField, TextField,
GridTile,
GridList} from 'material-ui';

// import '../../Service/style.scss';

@inject('appstate')
@observer
export default class IdentificationPassport extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.customer = props.appstate.customer;
    this.state = {
  
      ...props.defaultValue
    };
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  handleChangePassport = (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.customer.CustomerData.passport_photo = "/api/v1"+response.path;
    });
  }

  handleChangeIdentification = (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.customer.CustomerData.id_photo = "/api/v1"+response.path;
    });
  }

  render() {

    const styles = {
        root: {
          // display: 'flex',
          padding: '5px',
          flexWrap: 'wrap',
          justifyContent: 'space-around',
        },
        gridList: {
          display: 'flex',
          flexWrap: 'nowrap',
          overflowX: 'auto',
        },
        titleStyle: {
          color: 'rgb(0, 188, 212)',
        },
        radioButton: {
          marginTop: 16,
        },
      };

    return(
      <div style={{
        
      }}>
        <div className="row">
        <div className="col s12 m6 l6">
            <p className="label-form">Identification</p>
            <input 
              type="file" 
              onChange={this.handleChangeIdentification} 
              accept="image/*" 
            />
        </div>
        <div className="col s12 m6 l6">
            <p className="label-form">Passport</p>
            <input 
              type="file" 
              onChange={this.handleChangePassport} 
              accept="image/*" 
            />
        </div>
    </div>
    <div className="row">
      <div className="col s12 m6 l6">
        <div className="row">
          <h4>
            Identification Photo View
          </h4>
        </div>
        <div className="row">
          <img src={this.http.appendImagePath(this.customer.CustomerData.id_photo)} width="100%" style={{marginBottom:'10px'}}/>
        </div>
      </div>
      <div className="col s12 m6 l6">
        <div className="row">
          <h4>
            Passport Photo View
          </h4>
        </div>
        <div className="row">
        <img src={this.http.appendImagePath(this.customer.CustomerData.passport_photo)} width="100%" style={{marginBottom:'10px'}}/>
        </div>
      </div>
    </div>
      </div>
    );

  }

}
