import type { Meta, StoryObj } from "@storybook/react";
import type { CSSProperties, ReactNode } from "react";
import { Flex } from "./Flex";
import { Box } from "../Box";
import { excludeControls, sizeOptions } from "../../utils";
import type { FlexProps } from "./types";

type StoryType = StoryObj<typeof Flex>;

const meta: Meta<typeof Flex> = {
  title: "Layout/Flex",
  component: Flex,
  argTypes: {
    flexDirection: {
      control: { type: "select" },
      options: ["", "row", "row-reverse", "column", "column-reverse"],
    },
    flexWrap: {
      control: { type: "select" },
      options: ["", "nowrap", "wrap", "wrap-reverse"],
    },
    flexGrow: {
      control: { type: "text" },
      if: {
        arg: "flex",
        truthy: false,
      },
    },
    flex: {
      control: { type: "text" },
    },
    justifyContent: {
      control: { type: "select" },
      options: [
        "",
        "space-around",
        "space-between",
        "space-evenly",
        "stretch",
        "center",
        "end",
        "flex-end",
        "flex-start",
        "start",
        "left",
        "normal",
        "right",
      ],
    },
    alignItems: {
      control: { type: "select" },
      options: [
        "",
        "center",
        "end",
        "flex-end",
        "flex-start",
        "self-end",
        "self-start",
        "start",
        "baseline",
        "normal",
        "stretch",
      ],
    },
    alignContent: {
      control: { type: "select" },
      options: [
        "",
        "space-around",
        "space-between",
        "space-evenly",
        "stretch",
        "center",
        "end",
        "flex-end",
        "flex-start",
        "start",
        "baseline",
        "normal",
      ],
    },
    gap: {
      control: { type: "select" },
      options: [...sizeOptions],
    },
    rowGap: {
      control: { type: "select" },
      options: [...sizeOptions],
      if: {
        arg: "gap",
        truthy: false,
      },
    },
    columnGap: {
      control: { type: "select" },
      options: [...sizeOptions],
      if: {
        arg: "gap",
        truthy: false,
      },
    },
    ...excludeControls("style", "role"),
  },
};

type CardProps = {
  children: ReactNode;
  style?: CSSProperties;
};

const Card = ({ children, style, ...props }: CardProps) => (
  <Box
    style={{
      borderRadius: "4px",
      padding: "8px",
      backgroundColor: "#dddddd",
      width: "100%",
      ...style,
    }}
    {...props}
  >
    {children}
  </Box>
);

export const RowLayout: StoryType = {
  render: (args: FlexProps) => (
    <Flex {...args}>
      <Card>Item</Card>
      <Card>Item</Card>
      <Card>Item</Card>
    </Flex>
  ),
  args: {
    flexDirection: "row",
    flexWrap: "nowrap",
    flexGrow: "0",
    flex: "1 1 0px",
    justifyContent: "normal",
    alignItems: "stretch",
    alignContent: "flex-start",
    gap: "xs",
  },
};

export const ColumnLayout: StoryType = {
  render: (args: FlexProps) => (
    <Flex {...args}>
      <Card>Item</Card>
      <Card>Item</Card>
      <Card>Item</Card>
    </Flex>
  ),
  args: {
    flexDirection: "column",
    flexWrap: "nowrap",
    flexGrow: "0",
    flex: "1 1 0px",
    justifyContent: "normal",
    alignItems: "stretch",
    alignContent: "normal",
    gap: "xs",
  },
};

export default meta;
