import React from "react";
import { Meta } from "@storybook/react";
import { OrgChart } from "@progress/kendo-react-orgchart";
import { OrgChartProps } from "./OrgChartProps";
import { flatdata } from "./mockdata/flat-data";

import { createDataTree as KendoCreateDataTree } from "@progress/kendo-react-data-tools";
import {
  OrgChartExpandChangeEvent as KendoOrgChartExpandChangeEvent,
  processOrgChartItems as KendoProcessOrgChartItems,
} from "@progress/kendo-react-orgchart";

const idField = "id";
const childrenField = "employees";
const titleField = "name";
const subtitleField = "title";
const expandField = "expanded";

export default {
  title: "Design System/OrgChart",
  component: OrgChart,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'OrgChart component allows you to visualize and interact with an organizational structure. \n\n```javascript\nimport { OrgChart } 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:
        'Sets custom aria-label to the OrgChart. The default value is "Org Chart".',
    },
    avatarField: {
      control: { type: "text" },
      description:
        "Specifies the avatar of the field which will provide a avatar representation for the item. Defaults to text.",
    },
    cardHeight: {
      control: { type: "number" },
      description: "Specifies the height of the card of the OrgChart.",
    },
    cardsColors: {
      control: { type: "array" },
      description:
        "Specifies a string array with the colors applied to the items. By default the colors come from the Kendo Theme that is used.",
    },
    cardWidth: {
      control: { type: "number" },
      description: "Specifies the width of the card of the OrgChart.",
    },
    childrenField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which will provide an array representation of the item children.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the OrgChart.",
    },
    data: {
      control: { type: "array" },
      description: "Sets the data of the OrgChart.",
    },
    expandField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to expanded.",
    },
    groupField: {
      control: { type: "text" },
      description: "Specifies the field by which the OrgChart data is grouped.",
    },
    groupSubtitleHeight: {
      control: { type: "number" },
      description:
        "Specifies the height of the subtitle of the grouped OrgChart.",
    },
    groupSubtitleRender: {
      control: { type: "text" },
      description:
        "Defines the component that will be used for rendering each of the grouped OrgChart subtitle.",
    },
    groupTitleHeight: {
      control: { type: "number" },
      description: "Specifies the height of the title of the grouped OrgChart.",
    },
    groupTitleRender: {
      control: { type: "text" },
      description:
        "Defines the component that will be used for rendering each of the grouped OrgChart title.",
    },
    hasChildrenField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which indicates to the OrgChart that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature. Defaults to undefined.",
    },
    height: {
      control: { type: "text" },
      description: "Specifies the width the OrgChart.",
    },
    id: {
      control: { type: "text" },
      description: "Sets custom id to the OrgChart.",
    },
    idField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which will provide a id for the item. Defaults to id.",
    },
    itemRender: {
      control: { type: "text" },
      description:
        "Defines the component that will be used for rendering each of the OrgChart items.",
    },
    navigatable: {
      control: { type: "boolean" },
      description:
        "Specifies if the OrgChart can be navigatable with keyboard. Defaults to true.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the OrgChart.",
    },
    subtitleField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which will provide a subtitle representation for the item. Defaults to text.",
    },
    titleField: {
      control: { type: "text" },
      description:
        "Specifies the name of the field which will provide a title representation for the item. Defaults to text.",
    },
    verticalLine: {
      control: { type: "number" },
      description: "Specifies the height of the vertical line of the OrgChart.",
    },
  },
} as Meta;

export const Default = (args: OrgChartProps): JSX.Element => {
  const [expand, setExpand] = React.useState({ ids: [1], idField: "id" });

  const onExpandChange = (event: KendoOrgChartExpandChangeEvent) => {
    let ids = expand.ids.slice();

    const index = ids.indexOf(event.item.id);

    index === -1 ? ids.push(event.item.id) : ids.splice(index, 1);
    setExpand({ ids, idField: "id" });
  };

  const expandedData = React.useMemo(() => {
    const treeData = KendoCreateDataTree(
      flatdata,
      (i) => i.id,
      (i) => i.parentId,
      childrenField
    );
    return KendoProcessOrgChartItems(treeData, {
      expand: expand,
      childrenField: childrenField,
    });
  }, [expand]);

  return (
    <OrgChart
      data={expandedData}
      navigatable={true}
      idField={idField}
      childrenField={childrenField}
      titleField={titleField}
      subtitleField={subtitleField}
      expandField={expandField}
      cardWidth={250}
      onExpandChange={onExpandChange}
    />
  );
};