import { SquigglePartial, SquiggleEditor } from "../components/SquiggleEditor";
import { useState } from "react";
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";

<Meta title="Squiggle/SquigglePartial" component={SquigglePartial} />

export const Template = (props) => <SquigglePartial {...props} />;

# Squiggle Partial

A Squiggle Partial is an editor that does not return a graph to the user, but
instead returns bindings that can be used by further Squiggle Editors.

<Canvas>
  <Story
    name="Standalone"
    args={{
      defaultCode: "x = normal(5,2)",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="With Editor"
    args={{
      initialPartialString: "x = normal(5,2)",
      initialEditorString: "x",
    }}
  >
    {(props) => {
      let [bindings, setBindings] = useState({});
      return (
        <>
          <SquigglePartial
            {...props}
            defaultCode={props.initialPartialString}
            onChange={setBindings}
          />
          <SquiggleEditor
            {...props}
            defaultCode={props.initialEditorString}
            bindings={bindings}
          />
        </>
      );
    }}
  </Story>
</Canvas>