import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { Box } from "../Box";
import type { TextProps } from "./Text";
import { Text } from "./Text";

type StoryType = StoryObj<typeof Text>;

const meta: Meta<typeof Text> = {
  title: "Components/Text",
  component: Text,
  excludeStories: ["ExampleSpacing"],
  argTypes: excludeControls("style"),
};

export const Heading1: StoryType = {
  render: (args: TextProps) => <Text {...args}>Heading 1</Text>,
  args: {
    elementType: "h1",
  },
};

export const Heading2: StoryType = {
  render: (args: TextProps) => <Text {...args}>Heading 2</Text>,
  args: {
    elementType: "h2",
  },
};

export const Heading3: StoryType = {
  render: (args: TextProps) => <Text {...args}>Heading 3</Text>,
  args: {
    elementType: "h3",
  },
};

export const Heading4: StoryType = {
  render: (args: TextProps) => <Text {...args}>Heading 4</Text>,
  args: {
    elementType: "h4",
  },
};

export const Paragraph: StoryType = {
  render: (args: TextProps) => <Text {...args}>Paragraph</Text>,
  args: {
    elementType: "p",
  },
};

export const Small: StoryType = {
  render: (args: TextProps) => <Text {...args}>Small paragraph</Text>,
  args: {
    variant: "small",
  },
};

export const Legal: StoryType = {
  render: (args: TextProps) => <Text {...args}>Small print</Text>,
  args: {
    variant: "legal",
  },
};

export const VariantHeading1: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant H1</Text>,
  args: {
    variant: "h1",
  },
};

export const VariantHeading2: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant H2</Text>,
  args: {
    variant: "h2",
  },
};

export const VariantHeading3: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant H3</Text>,
  args: {
    variant: "h3",
  },
};

export const VariantHeading4: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant H4</Text>,
  args: {
    variant: "h4",
  },
};

export const VariantBody: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant body</Text>,
  args: {
    variant: "body",
  },
};

export const VariantSmall: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant small</Text>,
  args: {
    variant: "small",
  },
};

export const VariantLegal: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant legal</Text>,
  args: {
    variant: "legal",
  },
};

export const VariantTitle: StoryType = {
  render: (args: TextProps) => <Text {...args}>Variant title</Text>,
  args: {
    variant: "title",
  },
};

export const Themed: StoryType = {
  render: (args: TextProps) => <Text {...args}>Sample Text</Text>,
  args: {
    elementType: "h4",
    variant: "h4",
    style: {
      color: "green",
    },
  },
};

export const ExampleSpacing = () => (
  <Box>
    <Text variant="h3">Tight paragraph spacing</Text>
    <Text spacing="tight">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
      enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
      Etiam et tortor a nunc hendrerit luctus sed at nunc.
    </Text>
    <Text spacing="tight">
      Mauris pharetra enim et turpis lacinia, quis porta velit commodo.
      Scelerisque vulputate id sit amet nisl. Etiam et tortor a nunc hendrerit
      luctus sed at nunc.
    </Text>
    <Text spacing="tight">
      Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
      dolor nibh, facilisis at tempus at, iaculis sed mi.
    </Text>
    <Text variant="h3">Loose paragraph spacing</Text>
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel lorem
      enim. Nam vitae enim mollis turpis scelerisque vulputate id sit amet nisl.
      Etiam et tortor a nunc hendrerit luctus sed at nunc.
    </Text>
    <Text>
      Mauris pharetra enim et turpis lacinia, quis porta velit commodo.
      Scelerisque vulputate id sit amet nisl. Etiam et tortor a nunc hendrerit
      luctus sed at nunc.
    </Text>
    <Text>
      Ut vel lectus arcu. Etiam ut efficitur turpis, pretium pretium nunc. Ut
      dolor nibh, facilisis at tempus at, iaculis sed mi.
    </Text>
  </Box>
);

export default meta;
