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.state = {
      videoFiles: [],
    };
  }

  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");
    this.setState({
      videoFiles:[],
    });
    // post request
  }

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

  render() {
    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'}}>Select 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);