import { Meta } from "@storybook/react";
import { ChipProps } from "./ChipProps";
import Chip from "./Chip";

export default {
  title: "Design System/Buttons/Chip",
  component: Chip,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Chip component allows users to enter information, make selections, filter content, or trigger actions. \n\n```javascript\nimport { Chip } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaDescribedBy: {
      control: { type: "text" },
      description:
        "Identifies the element(s) which will describe the component, similar to an HTML aria-describedby attribute.",
    },
    children: {
      control: { type: "text" },
      description: "The child components of the Chip.",
    },
    className: {
      control: { type: "text" },
      description: "The CSS classes applied to the Chip.",
    },
    dataItem: {
      control: { type: "object" },
      description: "The data item of the Chip.",
    },
    dir: {
      control: { type: "text" },
      description: "The direction of the Chip.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Determines whether the Chip is disabled.",
    },
    fillMode: {
      control: { type: "select" },
      description: "The fill mode of the Chip.",
    },
    icon: {
      control: { type: "text" },
      description: "The icon of the Chip.",
    },
    id: {
      control: { type: "text" },
      description: "The ID of the Chip.",
    },
    removable: {
      control: { type: "boolean" },
      description: "Determines whether the Chip is removable.",
    },
    removeIcon: {
      control: { type: "text" },
      description: "The remove icon of the Chip.",
    },
    removeSvgIcon: {
      control: { type: "object" },
      description: "The remove SVG icon of the Chip.",
    },
    rounded: {
      control: { type: "select" },
      description: "The rounded corner type of the Chip.",
    },
    selected: {
      control: { type: "boolean" },
      description: "Determines whether the Chip is selected.",
    },
    selectedIcon: {
      control: { type: "text" },
      description: "The selected icon of the Chip.",
    },
    selectedSvgIcon: {
      control: { type: "object" },
      description: "The selected SVG icon of the Chip.",
    },
    size: {
      control: { type: "select" },
      description: "The size of the Chip.",
    },
    style: {
      control: { type: "object" },
      description: "The styles of the Chip.",
    },
    svgIcon: {
      control: { type: "object" },
      description: "The SVG icon of the Chip.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "The tab index of the Chip.",
    },
    text: {
      control: { type: "text" },
      description: "The text of the Chip.",
    },
    themeColor: {
      control: { type: "select" },
      description: "The theme color of the Chip.",
    },
    value: {
      control: { type: "object" },
      description: "The value of the Chip.",
    },
    onBlur: {
      control: { type: "action" },
      description: "Fires when the Chip loses focus.",
    },
    onClick: {
      control: { type: "action" },
      description: "Fires when the Chip is clicked.",
    },
    onDoubleClick: {
      control: { type: "action" },
      description: "Fires when the Chip is double-clicked.",
    },
    onFocus: {
      control: { type: "action" },
      description: "Fires when the Chip gains focus.",
    },
    onKeyDown: {
      control: { type: "action" },
      description:
        "Fires when a key is pressed down while the Chip is focused.",
    },
    onMouseDown: {
      control: { type: "action" },
      description: "Fires when the mouse button is pressed down over the Chip.",
    },
    onMouseEnter: {
      control: { type: "action" },
      description: "Fires when the mouse enters the Chip.",
    },
    onMouseLeave: {
      control: { type: "action" },
      description: "Fires when the mouse leaves the Chip.",
    },
    onMouseMove: {
      control: { type: "action" },
      description: "Fires when the mouse is moved over the Chip.",
    },
    onMouseOut: {
      control: { type: "action" },
      description: "Fires when the mouse is moved out of the Chip.",
    },
    onMouseOver: {
      control: { type: "action" },
      description: "Fires when the mouse is moved over the Chip.",
    },
    onMouseUp: {
      control: { type: "action" },
      description: "Fires when the mouse button is released over the Chip.",
    },
    onRemove: {
      control: { type: "action" },
      description: "Fires when the Chip is removed.",
    },
  },
} as Meta;

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

Default.args = {
  dataTestId: "chip-data-testid",
  text: "Chip",
};