import { Meta } from "@storybook/react";
import { BadgeProps } from "./BadgeProps";
import Badge from "./Badge";
import BadgeContainer from "../BadgeContainer/BadgeContainer";
import Icon from "@/components/CommonUtilities/Icon/Icon";

export default {
  title: "Design System/Indicators/Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'Badge component is a visual indicator for UI elements. It enables you to easily show statuses, notifications, and short messages in your app. Badges provide additional contextual information for other elements on the page. \n\n```javascript\nimport { Badge } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    align: {
      control: { type: "object" },
      description: "Specifies the alignment of the Badge.",
    },
    children: {
      control: { type: "text" },
      description: "The React elements that will be rendered inside the Badge.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the Badge.",
    },
    cutoutBorder: {
      control: { type: "boolean" },
      description:
        'Specifies whether or not to render additional "cutout" border around the Badge.',
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    fillMode: {
      control: { type: "select" },
      description: "Specifies the appearance fill style of the Badge.",
    },
    position: {
      control: { type: "select" },
      description:
        "Specifies the position of the Badge relative to the edge of the container element.",
    },
    rounded: {
      control: { type: "select" },
      description: "Specifies the roundness of the Badge.",
    },
    size: {
      control: { type: "select" },
      description: "Specifies the size of the Badge.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Badge.",
    },
    themeColor: {
      control: { type: "select" },
      description: "Specifies the theme color of the Badge.",
    },
  },
} as Meta;

export const Default = (args: BadgeProps): JSX.Element => (
  <BadgeContainer>
    <Badge {...args}>6</Badge>
    <Icon size="xxlarge" name="bell" />
    {args.children}
  </BadgeContainer>
);

Default.args = {
  dataTestId: "badge-data-testid",
  align: { horizontal: "end", vertical: "top" },
  cutoutBorder: false,
  fillMode: "solid",
  position: "edge",
  rounded: "full",
  size: "medium",
  themeColor: "primary",
};