import { Meta } from "@storybook/react";
import { MenuProps } from "./MenuProps";
import Menu from "./Menu";
export default {
  title: "Design System/Layout/Menu",
  component: Menu,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Menu is a multi-level component for displaying hierarchical data. \n\n```javascript\nimport { Menu } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    children: {
      control: { type: "text" },
      description: "Sets the Menu items declaratively.",
    },
    className: {
      control: { type: "text" },
      description: "Adds a custom className to the Menu top element.",
    },
    customCloseItemIds: {
      control: { type: "array" },
      description:
        "Sets the ids of the Menu items that will not be closed on mouse-leave.",
    },
    dir: {
      control: { type: "text" },
      description: "Sets the direction of the Menu.",
    },
    hoverCloseDelay: {
      control: { type: "number" },
      description:
        "Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave.",
    },
    hoverOpenDelay: {
      control: { type: "number" },
      description:
        "Specifies the delay in milliseconds before the Menu items are opened on item mouse-hover.",
    },
    itemRender: {
      control: { type: "object" },
      description:
        "A React functional or class component for rendering the innermost part of the Menu item.",
    },
    items: {
      control: { type: "array" },
      description: "Sets the Menu items.",
    },
    linkRender: {
      control: { type: "object" },
      description:
        "A React functional or class component for rendering the link of the item.",
    },
    openOnClick: {
      control: { type: "boolean" },
      description:
        "If set to true, the items are opened on mouse hover only after an initial click.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Menu.",
    },
    vertical: {
      control: { type: "boolean" },
      description: "Specifies whether the Menu will be vertical.",
    },
    onSelect: {
      control: { type: "function" },
      description:
        "Fires when a Menu item is selected. The event object contains details about the selected item, its id, and the native and synthetic events.",
    },
  },
} as Meta;

const sampleItems = [
  {
    text: "Item1",
    items: [
      { text: "Item1.1" },
      {
        text: "Item1.2",
        items: [{ text: "Item1.2.1" }, { text: "Item1.2.2" }],
      },
    ],
  },
  {
    text: "Item2",
    items: [{ text: "Item2.1" }, { text: "Item2.2" }, { text: "Item2.3" }],
  },
  {
    text: "Item3",
  },
];

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

Default.args = {
  dataTestId: "card-data-testid",
  items: sampleItems,
};