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>
 );