import { Text } from "../../../components/text";
import { useBpAwareProp } from ".";
import type { StoryObj, Meta } from "@storybook/react";
import type { BpAware } from "../../../theme/types";

const meta: Meta = {
  title: "Hooks/useBpAwareProp",
  argTypes: {
    prop: {
      table: {
        category: "Input Parameters",
        type: {
          summary: "BpAware<T>",
        },
      },
      type: "string",
      description: "The prop type made “breakpoint aware”",
      control: false,
    },
    defaultValue: {
      table: {
        category: "Input Parameters",
        type: {
          summary: "T",
        },
      },
      type: "string",
      description:
        "Default value to be returned if prop has not defined a value for the current active breakpoint",
      control: false,
    },
    "<T>": {
      table: {
        category: "Return Value",
        type: {
          summary: "T",
        },
      },
      description:
        "The correct value from `prop` if it was defined otherwise `defaultValue` value is returned",
      control: false,
      type: "string",
    },
  },
};

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

/**
 * In this example `bpContent` will be `small` and `medium` respectively depending on the current active breakpoint but because the `App` did not define a value for when the largest breakpoint is active, `bpContent` will, at that point, be assigned `defaultContent`.
 */
export const Default: Story = {
  render: () => {
    const UiKitComponent: React.FC<{ content: BpAware<string>; defaultContent: string }> = ({
      content,
      defaultContent,
    }) => {
      const bpContent = useBpAwareProp(content, defaultContent);
      return (
        <Text variant="body4" css={{ color: "$light-off-white" }}>
          {bpContent}
        </Text>
      );
    };

    return (
      <>
        <Text variant="body4" css={{ color: "$light-off-white" }}>
          Content:{" "}
        </Text>
        <UiKitComponent
          content={{ "@s": "small bp prop", "@m": "medium bp prop" }}
          defaultContent="default prop"
        />
      </>
    );
  },
};