import { Meta } from "@storybook/react";
import { ChartProps } from "./ChartProps";
import Chart from "./Chart";

import {
  ChartSeries as KendoChartSeries,
  ChartCategoryAxis as KendoChartCategoryAxis,
  ChartCategoryAxisItem as KendoChartCategoryAxisItem,
} from "@progress/kendo-react-charts";

import "hammerjs";
import ChartTitle from "../ChartTitle/ChartTitle";
import ChartSeriesItem from "../SeriesTypes/ChartSeriesItem/ChartSeriesItem";
import ChartLegend from "../ChartLegend/ChartLegend";

const categories = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
const series = [
  {
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855],
  },
  {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
  },
  {
    name: "Germany",
    data: [0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995],
  },
  {
    name: "World",
    data: [
      1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727,
    ],
  },
];

export default {
  title: "Design System/Charts/Chart",
  component: Chart,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Chart renders a wide range of high-quality data visualizations including panning and zooming, export and styling options. \n\n```javascript\nimport { Chart } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    axisDefaults: {
      control: { type: "object" },
      description: "Override the default axis options.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the component.",
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    drilldownState: {
      control: { type: "object" },
      description:
        "Gets or sets the current drill-down state for Drilldown Charts.",
    },
    paneDefaults: {
      control: { type: "object" },
      description: "Override the default pane options.",
    },
    panes: {
      control: { type: "object" },
      description: "The chart panes configuration.",
    },
    pannable: {
      control: { type: "boolean" },
      description: "Specifies if the Chart can be panned.",
    },
    renderAs: {
      control: { type: "text" },
      description: "Sets the preferred rendering engine.",
    },
    seriesColors: {
      control: { type: "array" },
      description: "The default colors for the Chart series.",
    },
    seriesDefaults: {
      control: { type: "object" },
      description: "Override the default series options.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the component.",
    },
    transitions: {
      control: { type: "boolean" },
      description: "If set to true, the Chart plays animations.",
    },
    zoomable: {
      control: { type: "boolean" },
      description: "Specifies if the Chart can be zoomed.",
    },
  },
} as Meta;

export const Default = (args: ChartProps): JSX.Element => {
  return (
    <Chart>
      <ChartTitle text="Gross domestic product growth GDP annual" />
      <ChartLegend position="top" orientation="horizontal" />
      <KendoChartCategoryAxis>
        <KendoChartCategoryAxisItem categories={categories} startAngle={45} />
      </KendoChartCategoryAxis>
      <KendoChartSeries>
        {series.map((item, idx) => (
          <ChartSeriesItem
            key={idx}
            type="column"
            data={item.data}
            name={item.name}
          />
        ))}
      </KendoChartSeries>
    </Chart>
  );
};