class ReactDialog extends React.Component {

    constructor(props) {
        super(props);

        this.changeImageLeft = this.changeImageLeft.bind(this);
        this.changeImageRight = this.changeImageRight.bind(this);

        this.arrayImages = [];

        this.i = 0; 

        this.state = {
            file: null, 
            title: '',
        }
    }

    async getData() {
       await fetch("https://olympics24.25one.com.ua/index.php")
       .then(responce => {
          return responce.json();
       })
       .then(data => {
          console.log(data); //data - an array of objects from API

          this.arrayImages = data; 
       }); 
    }

    async componentDidMount() {
       await this.getData();
      
       this.setState({
          file: this.arrayImages[0].file, 
          title: this.arrayImages[0].title,
       });
    }

    changeImageLeft() {
      this.i--;

      if (this.i == -1) {
         this.i = this.arrayImages.length - 1;
      }

      this.setData(this.i);
    }  

    changeImageRight() {
      this.i++;

      if (this.i == this.arrayImages.length) {
         this.i = 0;
      }

      this.setData(this.i);
    }

    setData(i) {
      this.setState({
          file: this.arrayImages[i].file,  
          title: this.arrayImages[i].title,
      });
    }

    render() {
        return (
            <div className="row container">
                <div className="col block-right text-center">
                    <i className="arrow left" onClick={this.changeImageLeft}></i>
                </div>     
                <div className="col text-center wrap">  
                    <img src={this.state.file} alt="image" />
                    <div className="title">{this.state.title}</div>
                </div> 
                <div className="col block-left">
                    <i className="arrow right" onClick={this.changeImageRight}></i>
                </div> 
            </div>
        );    	
    }

}

const elem = document.querySelector('.contents') 

if (elem) {
   ReactDOM.render(<ReactDialog />, elem)
}