// Copyright (c) 2017 PlanGrid, Inc.
import 'styles/main.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import FileViewer from './components/file-viewer';
import sampleHouse from '../example_files/SampleHouse.wexbim';
import solarImage from '../example_files/02-USVI-Solar.jpg';
import docx from '../example_files/SampleSpec.docx';
import doc from '../example_files/sample.doc';
import csv from '../example_files/Total_Crime.csv';
import mp4 from '../example_files/small.mp4';
import xlsx from '../example_files/SimpleSpreadsheet.xlsx';
import photo360 from '../example_files/360photo.jpg';
import avi from '../example_files/drop.avi';
import webm from '../example_files/small.webm';
import mov from '../example_files/step.mov';
import mp3 from '../example_files/sample.mp3';
import rtf from '../example_files/sample.rtf';
import pdf from '../example_files/sample.pdf';
import pdf2 from '../example_files/sample2.pdf';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: null,
      file: null
    };
  }

  /**
   * Receives filename with it's extension and return the extension / file type by getting it's last text from end of dots
   * @param {string} fileName the name of the file received from file input syntethic event
   */
  getViewerTypeFromMetaData = filename => {
    const split = filename.split('.');
    const ext = split[split.length - 1];
    return ext;
  };

  handleChange = e => {
    const {
      target: { files }
    } = e;

    this.setState({
      file: URL.createObjectURL(files[0]),
      type: this.getViewerTypeFromMetaData(files[0].name)
    });
  };

  render() {
    return (
      <div>
        <input type="file" onChange={this.handleChange} />
        <h1>{JSON.stringify(this.state)}</h1>
        <FileViewer fileType={this.state.type} filePath={this.state.file} />
      </div>
    );
  }
}

ReactDOM.render(<App />, window.document.getElementById('app'));
