import React, { Component } from "react";
import { withRouter, } from "react-router-dom";
import { Row } from 'react-bootstrap'

class PortadaPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }

  }

  componentDidMount() {  }

  render() {
    const { arrDatos } = this.props.initState
    const { diseno } = arrDatos
    const { coverPage } = diseno
 
    return (
      <div className={'contactoSidebar__container'} style={{ padding: 15, background: '#f3f3f3', }}>
        
        <div style={{ width: '90%', margin: '10px auto', }}>
          
          <Row
            onClick={ () => {
              diseno.coverPage = 1
              this.props.initsetState({ arrDatos }) 
            }}
            className={ `portadaSidebar__CoverPage ${coverPage === 1 ? 'portadaSidebar__activeCoverPage' : null}` }>
            <img alt={'Imagen'} src={"img/icons/p1.png"} />
          </Row>
          <Row
            onClick={ () => { 
              diseno.coverPage = 2
              this.props.initsetState({ arrDatos }) 
            }}
            className={ `portadaSidebar__CoverPage ${coverPage === 2 ? 'portadaSidebar__activeCoverPage' : null}` }>
            <img alt={'Imagen'} src={"img/icons/p2.png"} />
          </Row>
          <Row
            onClick={ () => { 
              diseno.coverPage = 3
              this.props.initsetState({ arrDatos }) 
            }}
            className={ `portadaSidebar__CoverPage ${coverPage === 3 ? 'portadaSidebar__activeCoverPage' : null}` }>
            <img alt={'Imagen'} src={"img/icons/p3.png"} />
          </Row>
          
        </div>

      </div>
    );
  }

  initsetState(param) {
    this.props.initsetState(param)
    return true
  }

};

export default withRouter(PortadaPage)