import type { Meta, StoryObj } from "@storybook/react";
import { Box } from "./Box";
import { excludeControls, sizeOptions } from "../../utils";
import type { BoxProps } from "./types";
import { TextField } from "../TextField";

type StoryType = StoryObj<typeof Box>;

const paddingProps = Object.assign(
  {},
  ...[
    "padding",
    "paddingX",
    "paddingInline",
    "paddingInlineStart",
    "paddingInlineEnd",
    "paddingY",
    "paddingBlock",
    "paddingBlockStart",
    "paddingBlockEnd",
    "paddingTop",
    "paddingRight",
    "paddingBottom",
    "paddingLeft",
  ].map(propName => ({
    [propName]: {
      control: { type: "select" },
      options: [...sizeOptions],
    },
  })),
);

const dimensionProps = Object.assign(
  {},
  ...["minWidth", "minHeight", "maxWidth", "maxHeight", "width", "height"].map(
    propName => ({
      [propName]: {
        control: { type: "number" },
      },
    }),
  ),
);

const meta: Meta<typeof Box> = {
  title: "Layout/Box",
  component: Box,
  argTypes: {
    ...paddingProps,
    ...dimensionProps,
    ...excludeControls("style"),
  },
};

export const Default: StoryType = {
  render: (args: BoxProps) => (
    <Box {...args}>
      <TextField label="First name" />
      <TextField label="Last name" />
      <TextField label="Email address" />
    </Box>
  ),
  args: {
    minWidth: 320,
    padding: "lg",
    style: {
      backgroundColor: "var(--color-background-light)",
      borderRadius: "var(--radius-1)",
    },
  },
};

export const CustomElement: StoryType = {
  render: (args: BoxProps) => (
    <Box {...args}>
      <Box>First item</Box>
      <Box>Second item</Box>
      <Box>Third item</Box>
    </Box>
  ),
  name: "Custom Element",
  args: {
    elementType: "span",
    minWidth: 320,
    paddingBlock: "lg",
    paddingInline: "xxl",
    style: {
      display: "block",
      backgroundColor: "var(--color-background-medium)",
      borderRadius: "var(--radius-1)",
      color: "var(--color-text-inverted)",
      margin: 0,
    },
  },
};

export default meta;
