import React, { Component } from 'react';
import DATA from './data';

class ProductsWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.renderProducts = this.renderProducts.bind(this);

  }

  renderProducts(n) {
    const numberOfColumns = n;
    const numberOfPiecesInOneColumn = Math.ceil(DATA.length / numberOfColumns);
    const arr = [];
    for(var i = 0; i < numberOfColumns; i++) {
      arr.push(null);
    }
    arr.map((_, j) => {
      const data = [];
      for (let i = 0; i < numberOfPiecesInOneColumn; i++) {
        if (DATA[j + i * numberOfColumns]) {
          data.push(DATA[j + i * numberOfColumns]);
        }
      }
      arr[j] = data;
    });

    const cols = arr.map((d, i) => (
      <div key={`${i}parent`} className="flex-col" style={{ width: `${100/numberOfColumns}%` }}>
        {d.map((k, j) => (
          <div key={`${j}child`} className="product">
            <div className="inner">
              <img src={`${k.imgAddress}`} alt={`${k.imgName}`} />
              <div className="caption">
                <p className="product-name">{k.name}</p>
                <p className="product-author">{k.author}</p>
                <p className="product-location">{k.location}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    ));
    return cols;
  }

  render() {
    return (
      <div style={{ display: 'flex', padding: '8px', flexDirection: 'row', flexWrap: 'wrap' }}>
        {this.renderProducts(5)}
      </div>
    );
  }
}

ProductsWrapper.propTypes = {};

export default ProductsWrapper;