import { Meta } from "@storybook/react";
import { SplitButtonProps } from "./SplitButtonProps";
import SplitButton from "./SplitButton";

export default {
  title: "Design System/Buttons/SplitButton",
  component: SplitButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact SplitButton allows the user to execute a default action that is bound to a Button or to choose a predefined action from a drop-down list. \n\n```javascript\nimport { SplitButton } 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: "Specifies the accessKey of the main button.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "The accessible label of the component.",
    },
    buttonClass: {
      control: { type: "text" },
      description: "Sets the className of the main button.",
    },
    children: {
      control: { type: "text" },
      description: "Determines the children nodes.",
    },
    className: {
      control: { type: "text" },
      description: "Sets the className of the SplitButton component.",
    },
    dir: {
      control: { type: "text" },
      description: "Sets the direction of the component.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Determines whether the component is disabled.",
    },
    fillMode: {
      control: {
        type: "select",
        options: ["null", "link", "flat", "outline", "solid"],
      },
      description: "Configures the fillMode of the SplitButton.",
    },
    icon: {
      control: { type: "text" },
      description:
        "Defines an icon that will be rendered next to the main button text.",
    },
    iconClass: {
      control: { type: "text" },
      description:
        "Defines an icon with a custom CSS class that will be rendered next to the main button text.",
    },
    id: {
      control: { type: "text" },
      description:
        "Sets the id property of the top div element of the component.",
    },
    imageUrl: {
      control: { type: "text" },
      description:
        "Defines the location of an image that will be displayed next to the main button text.",
    },
    item: {
      control: { type: "object" },
      description:
        "A React functional or class component which is used for rendering items.",
    },
    itemRender: {
      control: { type: "object" },
      description:
        "Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.",
    },
    items: {
      control: { type: "object" },
      description: "Specifies the list items.",
    },
    opened: {
      control: { type: "boolean" },
      description: "Opens the popup of the SplitButton if set to true.",
    },
    popupSettings: {
      control: { type: "object" },
      description: "Configures the popup.",
    },
    rounded: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "full", "large"],
      },
      description: "Configures the roundness of the SplitButton.",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Configures the size of the SplitButton.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the component.",
    },
    svgIcon: {
      control: { type: "object" },
      description:
        "Defines a SVG icon that will be rendered next to the main button text.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Specifies the tabIndex of the main button.",
    },
    text: {
      control: { type: "text" },
      description: "Specifies the text of the main button.",
    },
    textField: {
      control: { type: "text" },
      description:
        "Configures the field that will be used for the text of the items.",
    },
    themeColor: {
      control: {
        type: "select",
        options: [
          "null",
          "inverse",
          "base",
          "success",
          "dark",
          "light",
          "primary",
          "secondary",
          "tertiary",
          "info",
          "warning",
        ],
      },
      description: "Configures the themeColor of the SplitButton.",
    },
    title: {
      control: { type: "text" },
      description: "The title of the component.",
    },
    onBlur: {
      control: { type: "action" },
      description: "Fires when the component is blurred.",
    },
    onButtonClick: {
      control: { type: "action" },
      description: "Fires when the main button is clicked.",
    },
    onClose: {
      control: { type: "action" },
      description: "Fires when the popup which contains the items is closed.",
    },
    onFocus: {
      control: { type: "action" },
      description: "Fires when the component is focused.",
    },
    onItemClick: {
      control: { type: "action" },
      description: "Fires when an item is clicked.",
    },
    onOpen: {
      control: { type: "action" },
      description: "Fires when the popup which contains the items is opened.",
    },
  },
} as Meta;

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

Default.args = {
  dataTestId: "splitButton",
  text: "Action",
  items: [{ text: "Item1" }, { text: "Item2" }, { text: "Item3" }],
};