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