import React from "react";
 import ReactDOM from "react-dom";
 import "../src/genfun_formatter";
 import { Receipt } from "./render";
 import * as m from "./Model";

 import * as gf from "../src/genfuns";

 const Editable = gf
   .defgeneric("Editable", "props")
   .around([Object], function (_) {
     return (
       <div style={{ display: "inline-block" }}>{this.call_next_method()} </div>
     );
   })
   .primary([gf.Shape("label", "htmlFor")], ({ label, htmlFor }) => (
     <label {...{ htmlFor }}>{label}</label>
   ))

   .primary(
     [gf.Shape("label", "htmlFor", "value")],
     function ({ value, onChange }) {
       return (
         <>
           {this.call_next_method()}
           {onChange ? null : <span> {value}</span>}
         </>
       );
     }
   )
   .primary(
     [gf.Shape("label", "htmlFor", "value", "onChange")],
     function ({ value, htmlFor, onChange }) {
       return (
         <>
           {this.call_next_method()}
           <input
             type="text"
             value={value}
             id={htmlFor}
             name={htmlFor}

             onChange={onChange}
           ></input>

         </>
       );
     }
   ).fn;

 class Field extends React.Component {
   constructor(props) {
     super();
     this.state = { editing: false, val: props.value };
   }
   click() {

     this.setState(() => ({
       editing: !this.state.editing,
       val: this.state.val,
     }));

   }
   onChange(e) {
     const val = e.target.value;

     this.setState(() => ({ editing: true, val }));

   }
   render() {
     const editingProps = {};
     if (this.state.editing) {
       editingProps.onChange = this.onChange.bind(this);
     }

     return (
       <div>
         <Editable {...this.props} {...editingProps} value={this.state.val} />
         <button onClick={this.click.bind(this)}>Toggle</button>
       </div>
     );

   }
 }

 
 ReactDOM.render(
   <div>

     <Field label="the field" htmlFor="the-field" value="foo" />
     <Editable label="bazquuxes" htmlFor="bazquux" value="foo" display />
     <Editable label="bazquuxes" htmlFor="bazquux" value="foo" editable />

     <Receipt
       items={[
         new m.AlcoholicBeverage(11),
         new m.AlcoholicBeverage(12),
         new m.AlcoholicBeverage(13),
         new m.NormalFood(11),
         new m.NonFood(11),
         new m.AlcoholicBeverage(10),
       ]}
     />

   </div>,

   document.querySelector("main"),

   () => {

     console.log("rendered");

   }

 );