import { Sticky } from "..";
import { Text } from "../text";
import type { StoryObj, Meta } from "@storybook/react";
/**
 * The usage of the Sticky component is to construct the page structure of the wallet app.
 * It consists of three sub component, which are the <Sticky.Parent>, <Sticky.Sticky /> and <Sticky.Scrollable />.
 * In general, the <Sticky.Sticky> and <Sticky.Scrollable> have to be warpped inside the <Sticky.Parent>.
 * The <Sticky.Sticky /> is the static container to hold the static content, and the <Sticky.Scrollable /> is a container that to hold the scrollable content.
 * Combine with the page container of the wallet app, this component is able to auto detect either the screen or the content should be scrollable.
 */
const meta: Meta<typeof Sticky> = {
  title: "Sticky",
  tags: ["autodocs"],
};

export default meta;
type Story = StoryObj<typeof Sticky>;

export const Parent: Story = {
  // eslint-disable-next-line max-lines-per-function
  render: () => (
    <Sticky.Parent css={{ height: 200 }}>
      <Sticky.Sticky>
        <Text variant="body1" css={{ color: "$dark-off-white" }}>
          Header
        </Text>
      </Sticky.Sticky>
      <Sticky.Scrollable>
        <Text css={{ width: "400px", backgroundColor: "$off-white-72" }}>
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
          <br />
          content
        </Text>
      </Sticky.Scrollable>
    </Sticky.Parent>
  ),
};