import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { addTest } from '../actions/index';
import TestComponent from './TestComponent';
import { connect } from 'react-redux';
import { Router, Route, Link, NavLink} from 'react-router-dom';

window.once = true;
class MainPageComponent extends Component {
  constructor(props){
    super(props);
  }
  render(){

    // if(window.once){
    //   console.log('fuck')
    //   setTimeout(()=>{
    //     window.once = false;
    //     document.querySelector('li:nth-of-type(1) a').click();
    //     setTimeout(()=>{
    //       if(!document.querySelector('.main-page-item')){
    //         document.querySelector('li:nth-of-type(1) a').click();
    //       }
    //     },1500)
    //   },1000)
    // }
    return(
      <div className="main-page container">
        {
          this.props.tests.map((item,i)=>{
            return (
              <div onClick={()=>{this.props.toggleAdaptiveMenu()}} className="main-page-item" key={i}>
                <Link to={`/test/${i}`}>
                  <div className="main-page-item-img">
                    <img src={item.imageInputValue}/>
                    <img src="https://cdn.onlinewebfonts.com/svg/img_382094.png" className="cover-icon"/>
                  </div>
                  <div className="main-page-item-description">
                      <div className="main-page-item-title">{item.title}</div>
                      <div className="main-page-item-info">{item.description}</div>
                  </div>
                </Link>
              </div>
            )
          })
        }

      </div>
    )
  }
  // custom functions

}




const mapStateToProps = (state) => {


  return {
    tests: state,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MainPageComponent);
