import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  Row,
  Col,
  Button,
  Form,
  FormGroup,
} from 'reactstrap';

import Widget from '../../components/Widget/Widget';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.onChangeInputVideo = this.onChangeInputVideo.bind(this);
    this.onClickSaveVideo = this.onClickSaveVideo.bind(this);
    // this.analysisVideo = this.analysisVideo.bind(this);
    this.state = {
      videoFiles: [],
      videoAnalysisResult:null
    };
  }

  onChangeInputVideo(e) {
    const files = [];
    const reader = new FileReader();
    files.push(e.target.files[0]);
    reader.onloadend = () => {
      files[0].preview = reader.result;
      files[0].toUpload = true;
      this.setState({
        videoFiles: files,
      });
    };
    reader.readAsDataURL(e.target.files[0]);
  }

  onClickSaveVideo(e) {
    e.preventDefault();
    console.log(this.state.videoFiles);
    console.log("upload video");

    // post request
    fetch('http://localhost:3002/api/videoResult',{
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
      },
      redirect: 'follow',
      referrer: 'no-referrer',
      body: JSON.stringify(this.state.videoFiles)
    })
    .then(res=>res.json())
    .then(data=>this.setState({videoAnalysisResult:data}))
    
    console.log(this.state.videoAnalysisResult);
  }

  static propTypes = {
    visits: PropTypes.any,
    performance: PropTypes.any,
  };

  render() {
    console.log("render")
    console.log(this.state.videoFiles)
    return (
      <div>
        <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
        <Row>
          <Col lg={9} xs={12}>
            <Widget
              title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>}
            >
              <Form>
                <FormGroup style={{margin:'15px'}}>
                  <Col md="8">
                    <input
                      accept="video/*" onChange={this.onChangeInputVideo}
                      id="fileupload"
                      type="file" name="file" className="display-none"
                    />
                    <div>
                      <Button type="button" color="default" onClick={this.onClickSaveVideo} style={{margin:'10px 0px 0px 0px'}}>Analysis Video</Button>
                    </div>
                  </Col>
                </FormGroup>
              </Form>
            </Widget>
            </Col>
        </Row>
        <Row>
          <Col lg={9} xs={12}>
            <Widget
              title={<h5><span className="fw-semi-bold">Results</span></h5>}
            >
              <div>
                <div className="text-center" style={{ height: '300px' }} />
                <p className="fs-mini text-muted">
                </p>
              </div>
            </Widget>
          </Col>
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      filters: state.filters,
  }
}


export default connect(mapStateToProps)(Dashboard);

function postData(url = '', data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native JavaScript objects 
}