import { Meta } from "@storybook/react";
import Button from "./Button";
import { ButtonProps } from "./ButtonProps";
import { Colors } from "@/types/colors";

export default {
  title: "Design System/Buttons/Button",
  component: Button,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'Button component provides a clickable UI functionality. It can be configured to perform any action or trigger an event.\n\n```javascript\nimport { Button } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    element: {
      control: { type: "object" },
      description: "Gets the DOM element of the Button component.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Specifies if the Button is disabled.",
    },
    fillMode: {
      control: {
        type: "select",
        options: ["null", "link", "flat", "outline", "solid"],
      },
      description: "Configures the fillMode of the Button.",
    },
    icon: {
      control: { type: "text" },
      description: "Defines the name for an existing icon.",
    },
    iconClass: {
      control: { type: "text" },
      description: "Defines a CSS class or multiple classes.",
    },
    imageAlt: {
      control: { type: "text" },
      description: "Defines the alternative text of the image.",
    },
    imageUrl: {
      control: { type: "text" },
      description: "Defines a URL for an img element inside the Button.",
    },
    rounded: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "full", "large"],
      },
      description: "Configures the roundness of the Button.",
    },
    selected: {
      control: { type: "boolean" },
      description: "Sets the selected state of the Button.",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Configures the size of the Button.",
    },
    themeColor: {
      control: {
        type: "select",
        options: Colors,
      },
      description: "Configures the themeColor of the Button.",
    },
    togglable: {
      control: { type: "boolean" },
      description:
        "Provides visual styling that indicates if the Button is selected.",
    },
  },
} as Meta;

export const Default = (args: ButtonProps): JSX.Element => (
  <Button {...args}>Button</Button>
);

Default.args = {
  dataTestId: "button-data-testid",
  element: null,
  disabled: false,
  fillMode: "solid",
  icon: "info",
  imageAlt: "",
  imageUrl: "",
  rounded: "medium",
  size: "medium",
  themeColor: "base",
};