import { Meta } from "@storybook/react";
import { TreeViewProps } from "./TreeViewProps";
import TreeView from "./TreeView";

import {
  TreeViewExpandChangeEvent as KendoTreeViewExpandChangeEvent,
  TreeViewCheckChangeEvent as KendoTreeViewCheckChangeEvent,
  TreeViewItemClickEvent as KendoTreeViewItemClickEvent,
  processTreeViewItems as KendoProcessTreeViewItems,
  handleTreeViewCheckChange as KendoHandleTreeViewCheckChange,
  TreeViewCheckDescriptor as KendoTreeViewCheckDescriptor,
} from "@progress/kendo-react-treeview";
import React from "react";

interface TreeViewDataItem {
  text: string;
  expanded?: boolean;
  checked?: boolean;
  selected?: boolean;
  items?: TreeViewDataItem[];
}

const tree: TreeViewDataItem[] = [
  {
    text: "Furniture",
    items: [
      { text: "Tables & Chairs" },
      { text: "Sofas" },
      { text: "Occasional Furniture" },
    ],
  },
  {
    text: "Decor",
    items: [
      { text: "Bed Linen" },
      { text: "Curtains & Blinds" },
      { text: "Carpets" },
    ],
  },
];

export default {
  title: "Design System/TreeView",
  component: TreeView,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact TreeView displays hierarchical data in a traditional tree structure, supports user interaction through mouse or touch events, and performs reordering operations by using the drag-and-drop functionality. \n\n```javascript\nimport { TreeView } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    animate: {
      control: { type: "boolean" },
      description: "Controls the animation.",
    },
    "aria-label": {
      control: { type: "text" },
      description: "Defines a string value that labels the TreeView.",
    },
    "aria-labelledby": {
      control: { type: "text" },
      description:
        "Identifies the element or elements which will label the TreeView.",
    },
    "aria-multiselectable": {
      control: { type: "boolean" },
      description:
        "Indicates that the user can select more than one TreeView items.",
    },
    checkboxes: {
      control: { type: "boolean" },
      description: "Controls the rendering of checkboxes.",
    },
    checkField: {
      control: { type: "text" },
      description: "Specifies the name of the field for the checked state.",
    },
    checkIndeterminateField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field for the check indeterminate state.",
    },
    childrenField: {
      control: { type: "text" },
      description: "Specifies the name of the field for the item children.",
    },
    className: {
      control: { type: "text" },
      description: "Sets a class of the TreeView DOM element.",
    },
    data: {
      control: { type: "object" },
      description: "Sets the data of the TreeView.",
    },
    dir: {
      control: { type: "text" },
      description: "Sets the direction of the component.",
    },
    disableField: {
      control: { type: "text" },
      description: "Specifies the name of the field for the disabled state.",
    },
    draggable: {
      control: { type: "boolean" },
      description: "Controls the dispatching of the drag events.",
    },
    expandField: {
      control: { type: "text" },
      description: "Specifies the name of the field for the expanded state.",
    },
    expandIcons: {
      control: { type: "boolean" },
      description: "Controls the rendering of the expand (collapse) icons.",
    },
    focusIdField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field for focusing and keyboard navigation.",
    },
    hasChildrenField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which indicates that an item has children.",
    },
    item: {
      control: { type: "object" },
      description:
        "Defines the component for rendering each of the TreeView items.",
    },
    selectField: {
      control: { type: "text" },
      description: "Specifies the name of the field for the selected state.",
    },
    size: {
      control: { type: "select" },
      description: "Configures the size of the TreeView.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Sets a tabIndex of the TreeView DOM element.",
    },
    textField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field for the text representation.",
    },
    getFocusHierarchicalIndex: {
      control: { type: "function" },
      description: "Specifies the function for the focus hierarchical index.",
    },
    onCheckChange: {
      control: { type: "function" },
      description: "Fires when a checkbox is clicked.",
    },
    onContextMenu: {
      control: { type: "function" },
      description: "Fires when the ContextMenu is activated.",
    },
    onExpandChange: {
      control: { type: "function" },
      description:
        "Fires when the expanding or collapsing of an item is requested.",
    },
    onItemClick: {
      control: { type: "function" },
      description: "Fires when an item is clicked.",
    },
    onItemDragEnd: {
      control: { type: "function" },
      description: "Fires when a dragged item is dropped.",
    },
    onItemDragOver: {
      control: { type: "function" },
      description: "Fires when a dragged item changes its position.",
    },
    onItemDragStart: {
      control: { type: "function" },
      description: "Fires when the dragging of an item has started.",
    },
  },
} as Meta;

export const Default = (args: TreeViewProps): JSX.Element => {
  const [check, setCheck] = React.useState<
    any[] | (KendoTreeViewCheckDescriptor & { ids: any[] })
  >([]);

  const [expand, setExpand] = React.useState({
    ids: ["Item2"],
    idField: "text",
  });
  const [select, setSelect] = React.useState([""]);
  const onItemClick = (event: KendoTreeViewItemClickEvent) => {
    setSelect([event.itemHierarchicalIndex]);
  };
  const onExpandChange = (event: KendoTreeViewExpandChangeEvent) => {
    let ids = expand.ids.slice();
    const index = ids.indexOf(event.item.text);

    index === -1 ? ids.push(event.item.text) : ids.splice(index, 1);
    setExpand({ ids, idField: "text" });
  };
  const onCheckChange = (event: KendoTreeViewCheckChangeEvent) => {
    const settings = {
      singleMode: false,
      checkChildren: false,
      checkParents: false,
    };
    setCheck(KendoHandleTreeViewCheckChange(event, check, tree, settings));
  };

  return (
    <TreeView
      data={KendoProcessTreeViewItems(tree, {
        select: select,
        check: check,
        expand: expand,
      })}
      expandIcons={args.expandIcons}
      onExpandChange={onExpandChange}
      aria-multiselectable={true}
      size={args.size}
      animate={args.animate}
      onItemClick={onItemClick}
      checkboxes={args.checkboxes}
      onCheckChange={onCheckChange}
    />
  );
};

Default.args = {
  dataTestId: "treeView-data-testid",
  expandIcons: true,
  "aria-multiselectable": true,
  checkboxes: true,
  animate: true,
  size: "medium",
};