import React from 'react'
import { Grid, Row, Col } from 'react-bootstrap'
import FontAwesome from 'react-fontawesome'

export default class Slider extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      currentElements: this.props.children.slice(
        0,
        this.props.numberOfElements
      ),
      beginningIndex: 0,
      endIndex: this.props.numberOfElements
    }
  }

  onLeftArrowClick = () => {
    this.setState((prevState, props) => {
      return {
        begginingIndex: prevState.begginingIndex - 1,
        endIndex: prevState.endIndex - 1
      }
    })
  }

  onRightArrowClick = () => {
    this.setState((prevState, props) => {
      return {
        begginingIndex: prevState.begginingIndex + 1,
        endIndex: prevState.endIndex + 1
      }
    })
  }

  render = () => {
    return (
      <div className="slider">
        <div onClick={this.onLeftArrowClick}>
          <FontAwesome name="chevron-left" className="bold" size="5x" />
        </div>
        <div className={this.props.className}>
          {this.state.currentElements}
        </div>
        <div onClick={this.onRightArrowClick}>
          <FontAwesome name="chevron-right" className="bold" size="5x" />
        </div>
      </div>
    )
  }
}