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