import { h, Component } from 'preact'
import db from '../db'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      data: db.backupDB,
    }
    db.fetch( data => this.setState({ data }) )
  }
  render() {
    const paintings = this.state.data.painting.map( (painting, i) => {
      return (
        <div class='cell' key={i}>
          <div class='painting'>
            <div class='image' style={'background-image: url(' + painting.image.uri + ')'} />
          </div>
          <div class='about'>
            <div class='medium'>
              <div class='title'>
                {painting.title}
              </div>
              {painting.medium}<br/>
              {painting.date}<br/>
              {painting.image.caption}<br/>
            </div>
          </div>
        </div>
      )
    })
    return (
      <div>
        <div class='header'>Procedural Paintings by Pepper</div>
        <div class='scroller'>
          {paintings}
        </div>
      </div>
    )
  }
}