import React from "react";
import { Meta } from "@storybook/react";
import Breadcrumb from "./Breadcrumb";
import { BreadcrumbProps } from "./BreadcrumbProps";

const items = [
  {
    id: "home",
    text: "Home",
    iconClass: "k-i-home",
  },
  {
    id: "products",
    text: "Products",
  },
  {
    id: "computer",
    text: "Computer",
  },
  {
    id: "gaming",
    text: "Gaming",
  },
  {
    id: "keyboard",
    text: "Keyboard",
  },
];

export default {
  title: "Design System/Layout/Breadcrumb",
  component: Breadcrumb,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Breadcrumb component allows you to navigate within a folder structure or web page. It provides an easy way to navigate backwards by one or multiple steps. The Breadcrumb is always used in controlled mode. \n\n```javascript\nimport { Breadcrumb } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "Represents the label of the Breadcrumb component.",
    },
    breadcrumbDelimiter: {
      control: { type: "object" },
      description: "Represents the Breadcrumb delimiter component.",
    },
    breadcrumbLink: {
      control: { type: "object" },
      description: "Represents the Breadcrumb link component.",
    },
    breadcrumbListItem: {
      control: { type: "object" },
      description: "Represents the Breadcrumb list item component.",
    },
    breadcrumbOrderedList: {
      control: { type: "object" },
      description: "Represents the Breadcrumb ordered list component.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the Breadcrumb.",
    },
    data: {
      control: { type: "object" },
      description: "Represents the data of the Breadcrumb from type DataModel.",
    },
    dir: {
      control: { type: "radio", options: ["ltr", "rtl"] },
      description: "The Breadcrumb direction ltr or rtl.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Determines the disabled mode of the Breadcrumb.",
    },
    iconClassField: {
      control: { type: "text" },
      description: "Represents the iconClass field.",
    },
    iconField: {
      control: { type: "text" },
      description: "Represents the icon field.",
    },
    id: {
      control: { type: "text" },
      description:
        "Sets the id property of the top div element of the Breadcrumb.",
    },
    size: {
      control: { type: "radio", options: ["small", "medium", "large"] },
      description: "Specifies the padding of all Breadcrumb elements.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Breadcrumb.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Sets the tabIndex attribute to the Breadcrumb.",
    },
    textField: {
      control: { type: "text" },
      description: "Represents the text field.",
    },
    valueField: {
      control: { type: "text" },
      description: "Represents the value field.",
    },
    onItemSelect: {
      control: { type: "action" },
      description:
        "Represents the onItemSelect event. Triggered after click on the Breadcrumb.",
    },
    onKeyDown: {
      control: { type: "action" },
      description:
        "Represents the onKeyDown event. Triggered after keyboard click on the Breadcrumb.",
    },
  },
} as Meta;

export const Default = (args: BreadcrumbProps): JSX.Element => {
  return <Breadcrumb {...args} />;
};

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