import React, { Component } from 'react';

class UmbracoContent extends Component {
  /** */
  componentDidUpdate(prevProps, prevState) {
    // resize images, with timeout
    window.slimmage.checkResponsiveImages();
    setTimeout(() => {
      window.slimmage.checkResponsiveImages();
    }, 128);
  }

  /** */
  render() {
    let {
      page,
      filter,
      blocks
    } = this.props;

    if(!page || !page.get('rows')) {
      return null;
    }

    let rows = [];
    if(filter) {
      rows = page.get('rows').filter(filter);
    }
    else {
      rows = page.get('rows');
    }

    let output = null;
    if(rows.length === 1 && blocks) {
      // voor 1 rij, alleen blokken renderen
      output = (<div className="blocks-portal">
        {rows[0].Row.map((b, idx) => {
          return (<div key={idx} className={b.Classes} dangerouslySetInnerHTML={{__html: b.Html}} />);
        })}
      </div>);
    }
    else if(rows.length > 0) {
      output = (<div className="outer-portal">
        <div>
        {rows.map((r, idx) => {
          return (<div key={idx} className="row" data-name={r.Name}>
              {r.Row.map((b, idx) => {
                return (<div key={idx} className={b.Classes} dangerouslySetInnerHTML={{__html: b.Html}} />);
              })}
            </div>);
        })}
        </div>
      </div>);
    }

    return output;
  }
}

export default UmbracoContent;