import React from 'react'
import ProductList from './ProductList.jsx'
import OrderList from './OrderList.jsx'
import client from '../client'

export default class App extends React.Component {
  constructor() {
    super()
    this.state = {
      ready: false,
      products: null,
      product: null,
      orders: null,
    }
    this.load = this.load.bind(this)
    this.pick = this.pick.bind(this)
    client.fetch('/api/products').then(this.load)
  }
  load(products) {
    this.setState({
      ready: true,
      products: products,
    })
  }
  pick(product) {
    this.setState({
      product: product,
      orders: null
    })
    client.fetch('/api/orders', {id: product.product_merchant_product_id}).then((orders) => this.setState({ orders: orders }))
  }
  render() {
    if (! this.state.ready) {
      return (
        <div className='loading'>Loading...</div>
      )
    }
    else {
      const products = this.state.products
      const product = this.state.product
      const orders = this.state.orders
      return (
        <div>
          <div className='header'>
            <img src='/img/msa_logo.gif' className='logo' />
            <ProductList products={products} handleSelect={(product) => this.pick(product)} />
          </div>
          <OrderList product={product} orders={orders} />
        </div>
      )
    }
  }
}