import { Meta } from "@storybook/react";
import { ChipListProps } from "./ChipListProps";
import ChipList from "./ChipList";

export default {
  title: "Design System/Buttons/ChipList",
  component: ChipList,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'ChipList allows you to organize individual chips into a manageable list. It offers features like selection modes, controlled mode, and more. \n\n```javascript\nimport { ChipList } 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.",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Identifies the element(s) which will label the component.",
    },
    chip: {
      control: { type: "object" },
      description: "Customizes the rendering of the Chip.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the ChipList.",
    },
    data: {
      control: { type: "array" },
      description: "Sets the data of the ChipList.",
    },
    defaultData: {
      control: { type: "array" },
      description: "Sets the default data of the ChipList.",
    },
    defaultValue: {
      control: { type: "text" },
      description: "Sets the default value of the ChipList.",
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Sets the disabled property of the ChipList.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id of the ChipList.",
    },
    name: {
      control: { type: "text" },
      description: "Sets the name of the ChipList.",
    },
    required: {
      control: { type: "boolean" },
      description: "Sets the required property of the ChipList.",
    },
    selection: {
      control: { type: "text" },
      description: "Controls the selection of the ChipList.",
    },
    size: {
      control: { type: "select", options: [null, "small", "medium", "large"] },
      description: "Controls the size of the ChipList.",
    },
    style: {
      control: { type: "object" },
      description: "Sets the style of the ChipList.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Sets the tabIndex of the ChipList.",
    },
    textField: {
      control: { type: "text" },
      description: "Sets the textField of the ChipList.",
    },
    valid: {
      control: { type: "boolean" },
      description: "Indicates the validity of the ChipList.",
    },
    validationMessage: {
      control: { type: "text" },
      description: "Sets the validation message of the ChipList.",
    },
    validityStyles: {
      control: { type: "boolean" },
      description: "Indicates if the ChipList should show validity styles.",
    },
    value: {
      control: { type: "text" },
      description: "Controls the value of the ChipList.",
    },
    valueField: {
      control: { type: "text" },
      description: "Sets the valueField of the ChipList.",
    },
    onChange: {
      control: { type: "function" },
      description: "Fires when the value of the ChipList is changed.",
    },
    onClick: {
      control: { type: "function" },
      description: "Fires when the ChipList is clicked.",
    },
    onDataChange: {
      control: { type: "function" },
      description: "Fires when the data of the ChipList is changed.",
    },
    onDoubleClick: {
      control: { type: "function" },
      description: "Fires when the ChipList is double-clicked.",
    },
    onMouseDown: {
      control: { type: "function" },
      description: "Fires when the mouse button is pressed on the ChipList.",
    },
    onMouseEnter: {
      control: { type: "function" },
      description: "Fires when the mouse enters the ChipList.",
    },
    onMouseLeave: {
      control: { type: "function" },
      description: "Fires when the mouse leaves the ChipList.",
    },
    onMouseMove: {
      control: { type: "function" },
      description: "Fires when the mouse is moved over the ChipList.",
    },
    onMouseOut: {
      control: { type: "function" },
      description: "Fires when the mouse is moved out of the ChipList.",
    },
    onMouseOver: {
      control: { type: "function" },
      description: "Fires when the mouse is moved over the ChipList.",
    },
    onMouseUp: {
      control: { type: "function" },
      description: "Fires when the mouse button is released over the ChipList.",
    },
  },
} as Meta;

export const Default = (args: ChipListProps): JSX.Element => {
  const fruits = [
    {
      text: "Berry",
      value: "berry",
      disabled: true,
    },
    {
      text: "Apple",
      value: "apple",
      disabled: true,
    },
    {
      text: "Strawberry",
      value: "strawberry",
      disabled: true,
    },
    {
      text: "Banana",
      value: "banana",
      disabled: true,
    },
    {
      text: "Kiwi",
      value: "kiwi",
      disabled: true,
    },
  ];

  return (
    <ChipList
      defaultData={fruits}
      defaultValue={["berry", "strawberry"]}
      selection="multiple"
      {...args}
    />
  );
};

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