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

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

import s from './VideoAnalysis.module.scss';

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedArr: [false, false, false],
    };
  }

  async componentDidUpdate() {
    const isReceivingData = true;
  }

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

  render() {
    return (
      <div className={s.root}>
        <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>}
            >
              <div>
                <div className="text-center" style={{ height: '300px' }} />
                <p className="fs-mini text-muted">
                </p>
              </div>
            </Widget>
          </Col>
        </Row>
        <Row>
          <Col lg={9} xs={12}>
            <Widget
              title={<h5><span className="fw-semi-bold">Results</span></h5>}
              fetchingData={true}
            >
              <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);