import { Meta } from "@storybook/react";
import { DropDownButtonProps } from "./DropDownButtonProps";
import DropDownButton from "./DropDownButton";

export default {
  title: "Design System/Buttons/DropDownButton",
  component: DropDownButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact DropDownButton displays a popup list with action items and provides options for enabling or disabling its content, displaying icons, and binding it to data. \n\n```javascript\nimport { DropDownButton } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    accessKey: {
      control: { type: "text" },
      description: "Access key for the button.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "Aria label for accessibility.",
    },
    buttonClass: {
      control: { type: "text" },
      description: "CSS class for the button.",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS class.",
    },
    dir: {
      control: { type: "text" },
      description: "Text direction.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the button.",
    },
    fillMode: {
      control: { type: "select" },
      description: "Fill mode of the button.",
    },
    icon: {
      control: { type: "text" },
      description: "Icon for the button.",
    },
    iconClass: {
      control: { type: "text" },
      description: "CSS class for the icon.",
    },
    id: {
      control: { type: "text" },
      description: "ID for the button.",
    },
    imageUrl: {
      control: { type: "text" },
      description: "Image URL for the button.",
    },
    item: {
      control: { type: "object" },
      description: "Item object.",
    },
    itemRender: {
      control: { type: "function" },
      description: "Item render function.",
    },
    items: {
      control: { type: "array" },
      description: "Items array.",
    },
    opened: {
      control: { type: "boolean" },
      description: "Whether the dropdown is opened.",
    },
    popupSettings: {
      control: { type: "object" },
      description: "Popup settings.",
    },
    rounded: {
      control: { type: "select" },
      description: "Rounded corners.",
    },
    size: {
      control: { type: "select" },
      description: "Size of the button.",
    },
    style: {
      control: { type: "object" },
      description: "Inline styles.",
    },
    svgIcon: {
      control: { type: "text" },
      description: "SVG icon.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Tab index.",
    },
    text: {
      control: { type: "text" },
      description: "Button text.",
    },
    textField: {
      control: { type: "text" },
      description: "Text field.",
    },
    themeColor: {
      control: { type: "select" },
      description: "Theme color.",
    },
    title: {
      control: { type: "text" },
      description: "Title attribute.",
    },
    onBlur: {
      control: { type: "function" },
      description: "On blur event.",
    },
    onClose: {
      control: { type: "function" },
      description: "On close event.",
    },
    onFocus: {
      control: { type: "function" },
      description: "On focus event.",
    },
    onItemClick: {
      control: { type: "function" },
      description: "On item click event.",
    },
    onOpen: {
      control: { type: "function" },
      description: "On open event.",
    },
  },
} as Meta;

export const Default = (args: DropDownButtonProps): JSX.Element => {
  const items = [
    "My Profile",
    "Friend Requests",
    "Account Settings",
    "Support",
    "Log Out",
  ];
  return <DropDownButton {...args} items={items} />;
};

Default.args = {
  dataTestId: "dropdownbutton-data-testid",
  text: "DropDown",
};