import React from 'react';
 import * as gf from '../src/genfuns';
 import * as m from './Model';
 
 class Summary {
   constructor(wrapper = 'span') {
     this.wrapper = wrapper;
   }
 }
 class Detail { }
 
 const total_receipt = items => items.reduce((acc, item) => acc + item.subtotal, 0);
 const subtotal = items => items.reduce((acc, item) => acc + item.price, 0);
 const total_tax = items => items.reduce((acc, item) => acc + item.tax, 0);
 
 const display_money = amount => amount.toFixed(2);
 
 const ItemLabel = ({ desc, amount, wrapper, ...restProps }) =>
   React.createElement(wrapper, restProps,
     [
       <span className="desc" key="0"> {desc}: </span>,
       <span className="price" key="1">{display_money(amount)}</span>
     ]
   );
 
 export const Items = gf.defgeneric("Items", "animaltorender")
   .primary([gf.Shape("items", "view")], ({ items, view }) => Items(items, view))
   .primary([Array, Summary], (items, view) => (
     <>
       <ItemLabel desc="Subtotal" amount={subtotal(items)} wrapper={view.wrapper} />
       <ItemLabel desc="Tax" amount={total_tax(items)} wrapper={view.wrapper} />
       <ItemLabel desc="Total" amount={total_receipt(items)} wrapper={view.wrapper} />
     </>
   ))
   .primary([Array, Detail], items => (
     <ul>
       {items.map((a, idx) => <Item item={a} key={idx} />, items)}
       <Items items={items} view={new Summary('li')} />
     </ul>
   ))
   .fn;
 
 export const Item = gf.defgeneric("Item", "itemtorender")
   .primary([gf.Shape("item")], ({ item }) => Item(item))
   .around([m.Item], function (_) {
     const [desc, price] = this.call_next_method();
     return <ItemLabel desc={desc} amount={price} wrapper='li' />;
   })
   .primary([m.NonFood], item => ["Non-food Item", item.price])
   .primary([m.NormalFood], item => ["Food", item.price])
   .primary([m.AlcoholicBeverage], item => ["Alcohol", item.price])
   .fn;
 
 export const Receipt = ({items}) => (
   <div>
     <h1><Items {...{ items }} view={new Summary()} /></h1>
     <Items {...{ items }} view={new Detail()} />
   </div>
 );