import { ComponentMeta, ComponentStory } from "@storybook/react";
import * as React from "react";
import { ErrorBoundary } from "./";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "Example/ErrorBoundary",
  component: ErrorBoundary,
} as ComponentMeta<typeof ErrorBoundary>;

function BuggyButton(props) {
  const [counter, setCounter] = React.useState(0);
  if (counter === 3) {
    // Simulate a JS error
    throw new Error("I crashed!");
  }
  return (
    <button
      {...props}
      onClick={() => {
        setCounter(counter + 1);
      }}
    >
      Count: {counter}
    </button>
  );
}

function Demo() {
  const ref = React.useRef<HTMLButtonElement>(null);
  React.useEffect(() => {
    console.log("ref", ref.current);
  }, []);
  return (
    <ErrorBoundary ref={ref}>
      <BuggyButton />
    </ErrorBoundary>
  );
}

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof ErrorBoundary> = (args) => <Demo />;

export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {};