import { Editor, type EditorState } from "./Editor";
import type { Dynamic, State2Props } from "./util/extra";


export interface LetInBlockState {
  kind: "let";
  env: any;
  name: string;
  value: EditorState;
  inner: EditorState;
  resolved: undefined | Dynamic;
}

interface LetInBlockProps extends State2Props<LetInBlockState> {
  onResolve: (resolved: EditorState) => void;
}


export function LetInBlock({state, setState, onResolve}: LetInBlockProps) {
  const {env, name, value, inner, resolved} = state;
  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setState({...state, name: e.target.value});
  }
  return <span className="letIn">
    <div className="decl">
      let <input
        className='editable'
        value={name}
        placeholder="<variable name>"
        onChange={onChangeName}
        /> =
      <Editor
        state={value}
        filter={() => true}
        onResolve={(state: EditorState) => {} }
        onCancel={() => {} }
        setState={(state: EditorState) => {} }
        />
      in
    </div>
    <div className="inner">
      <Editor
        state={inner}
        filter={() => true}
        onResolve={(state: EditorState) => {} }
        onCancel={() => {} }
        setState={(state: EditorState) => {} }
        />
    </div>
  </span>
}