import type { Meta, StoryObj } from "@storybook/react";
import * as React from "react";
import { SwitchContainer } from ".";

const meta: Meta<typeof SwitchContainer> = {
  title: "Example/SwitchContainer",
  component: SwitchContainer,
};

type Story = StoryObj<typeof SwitchContainer>;

export const Basic: Story = {
  render: () => {
    const promise = React.useMemo(
      () =>
        new Promise((resolve) => {
          setTimeout(() => resolve("Nick"), 1000);
        }),
      [],
    );
    return (
      <SwitchContainer
        resolve={promise}
        data-component="SwitchContainer$Brevity"
      >
        <SwitchContainer.Fallback>
          <h3>Waiting...</h3>
        </SwitchContainer.Fallback>
        <SwitchContainer.Content>
          {(data) => <Item data={data} />}
        </SwitchContainer.Content>
      </SwitchContainer>
    );
  },
};

export const Bool: Story = {
  render: () => {
    const [loading, setLoading] = React.useState(false);
    React.useEffect(() => {
      window.setTimeout(() => {
        setLoading(true);
      }, 1000);
    }, []);
    return (
      <SwitchContainer
        resolve={loading}
        data-component="SwitchContainer$Brevity"
      >
        <SwitchContainer.Fallback>
          <h3>Waiting...</h3>
        </SwitchContainer.Fallback>
        <SwitchContainer.Content>
          <Item data={`Nick`} />
        </SwitchContainer.Content>
      </SwitchContainer>
    );
  },
};

export const Data: Story = {
  render: () => {
    const [data, setData] = React.useState<string | null>(null);
    React.useEffect(() => {
      window.setTimeout(() => {
        setData("Nick");
      }, 1200);
    }, []);
    return (
      <SwitchContainer resolve={data} data-component="SwitchContainer$Brevity">
        <SwitchContainer.Fallback>
          <h3>Waiting...</h3>
        </SwitchContainer.Fallback>
        <SwitchContainer.Content>
          {(d) => <Item data={d} />}
        </SwitchContainer.Content>
      </SwitchContainer>
    );
  },
};

export const Done: Story = {
  render: () => {
    return (
      <SwitchContainer
        resolve={"Nick"}
        data-component="SwitchContainer$Brevity"
      >
        <SwitchContainer.Fallback>
          <h3>Waiting...</h3>
        </SwitchContainer.Fallback>
        <SwitchContainer.Content>
          {(d) => <Item data={d} />}
        </SwitchContainer.Content>
      </SwitchContainer>
    );
  },
};

export const Suspense: Story = {
  render: () => {
    const [ready, setReady] = React.useState(false);
    return (
      <>
        <SwitchContainer
          resolve={true}
          data-component="SwitchContainer$Brevity"
        >
          <SwitchContainer.Fallback>
            <h3>Waiting...</h3>
          </SwitchContainer.Fallback>
          <SwitchContainer.Content>
            {ready ? <Suspender data="Done" /> : null}
          </SwitchContainer.Content>
        </SwitchContainer>
        <button onClick={() => setReady(true)}>Load</button>
      </>
    );
  },
};

function Item({ data }) {
  return <h1>Hello {data}</h1>;
}

const Suspender = React.lazy(
  () =>
    new Promise((resolve) => {
      setTimeout(() => resolve({ default: Item }), 5000);
    }),
);

export default meta;