import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { ThemeProviderWithStyledEngine, Typography } from "../";
import { theme } from "../theme";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const colorOptions = ["main", "secondary", "action", "success", "danger"];
const meta = {
  title: "Components/Data Display/Typography",
  component: Typography,
  decorators: [decorator],
  argTypes: {
    color: {
      table: {
        type: null,
      },
      options: colorOptions,
      description: colorOptions.map((o) => `\`"${o}"\``).join(", "),
    },
  },
} satisfies Meta<typeof Typography>;

export default meta;

const Template: StoryFn<typeof Typography> = ({ children, ...props }) => (
  <div
    style={{
      padding: "12px",
      backgroundColor:
        props.mode === "light" ? theme.palette.N0 : theme.palette.N800,
      borderRadius: "6px",
      marginBottom: "20px",
    }}
  >
    <Typography {...props}>{children}</Typography>
  </div>
);

export const Default: StoryFn<typeof Typography> = Template.bind({});
Default.args = {
  children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  size: "400",
  weight: "regular",
  renderAs: "span",
  color: "main",
  mode: "light",
};
