import React from "react";
import { Meta } from "@storybook/react";
import { StockChartProps } from "./StockChartProps";
import StockChart from "./StockChart";
import "hammerjs";

import {
  ChartTitle as KendoChartTitle,
  ChartSeries as KendoChartSeries,
  ChartSeriesItem as KendoChartSeriesItem,
  ChartNavigator as KendoChartNavigator,
  ChartNavigatorSelect as KendoChartNavigatorSelect,
  ChartNavigatorSeries as KendoChartNavigatorSeries,
  ChartNavigatorSeriesItem as KendoChartNavigatorSeriesItem,
} from "@progress/kendo-react-charts";

import { IntlService as KendoIntlService } from "@progress/kendo-react-intl";
import {
  CompositeFilterDescriptor as KendoCompositeFilterDescriptor,
  filterBy as KendoFilterBy,
} from "@progress/kendo-data-query";

import data from "./mockData/stock-data.json";

const intl = new KendoIntlService("en");
const stockData = data.map((item) =>
  Object.assign({}, item, { Date: intl.parseDate(item.Date) })
);

const from = new Date("2009/02/05");
const to = new Date("2011/10/07");

const navigatorData = Array.from(stockData);

export default {
  title: "Design System/Charts/StockChart",
  component: StockChart,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time. \n\n```javascript\nimport { StockChart } 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.",
    },
    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.",
    },
    partialRedraw: {
      control: { type: "boolean" },
      description:
        "Specifies whether the StockChart will perform full or partial redraw upon re-render.",
    },
    renderAs: {
      control: { type: "text" },
      description: "Sets the preferred rendering engine.",
    },
    seriesColors: {
      control: { type: "object" },
      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 when it displays the series.",
    },
    zoomable: {
      control: { type: "boolean" },
      description: "Specifies if the Chart can be zoomed.",
    },
    onAxisLabelClick: {
      control: { type: "function" },
      description: "Fires when the user clicks an axis label.",
    },
    onDrag: {
      control: { type: "function" },
      description: "Fires as long as the user is dragging the Chart.",
    },
    onDragEnd: {
      control: { type: "function" },
      description: "Fires when the user stops dragging the Chart.",
    },
    onDragStart: {
      control: { type: "function" },
      description: "Fires when the user starts dragging the Chart.",
    },
    onLegendItemClick: {
      control: { type: "function" },
      description: "Fires when the user clicks a legend item.",
    },
    onLegendItemHover: {
      control: { type: "function" },
      description: "Fires when the user hovers over a legend item.",
    },
    onNavigatorFilter: {
      control: { type: "function" },
      description: "Fires when the navigator range is changed.",
    },
    onNoteClick: {
      control: { type: "function" },
      description: "Fires when the user clicks a note.",
    },
    onNoteHover: {
      control: { type: "function" },
      description: "Fires when the user hovers over a note.",
    },
    onPlotAreaClick: {
      control: { type: "function" },
      description: "Fires when the user clicks the plot area.",
    },
    onPlotAreaHover: {
      control: { type: "function" },
      description: "Fires when the user hovers the plot area.",
    },
    onRefresh: {
      control: { type: "function" },
      description: "Fires when the Chart is about to refresh.",
    },
    onRender: {
      control: { type: "function" },
      description: "Fires when the Chart is ready to render on screen.",
    },
    onSelect: {
      control: { type: "function" },
      description: "Fires when the user modifies the selection.",
    },
    onSelectEnd: {
      control: { type: "function" },
      description:
        "Fires when the user completes the modification of the selection.",
    },
    onSelectStart: {
      control: { type: "function" },
      description: "Fires when the user starts modifying the axis selection.",
    },
    onSeriesClick: {
      control: { type: "function" },
      description: "Fires when the user clicks the Chart series.",
    },
    onSeriesHover: {
      control: { type: "function" },
      description: "Fires when the user hovers over the Chart series.",
    },
    onZoom: {
      control: { type: "function" },
      description: "Fires as long as the user is zooming the Chart.",
    },
    onZoomEnd: {
      control: { type: "function" },
      description: "Fires when the user stops zooming the Chart.",
    },
    onZoomStart: {
      control: { type: "function" },
      description: "Fires when the user uses the mousewheel to zoom the Chart.",
    },
  },
} as Meta;

export const Default = (args: StockChartProps): JSX.Element => {
  const [seriesData, setSeriesData] = React.useState(Array.from(stockData));

  const onNavigatorChange = (event: { from: any; to: any }) => {
    const filters: KendoCompositeFilterDescriptor = {
      logic: "and",
      filters: [
        {
          field: "Date",
          operator: "gte",
          value: event.from,
        },
        {
          field: "Date",
          operator: "lt",
          value: event.to,
        },
      ],
    };

    setSeriesData(KendoFilterBy(navigatorData, filters));
  };

  return (
    <StockChart onNavigatorFilter={onNavigatorChange} partialRedraw={true}>
      <KendoChartTitle text="The Boeing Company NYSE:BA" />
      <KendoChartSeries>
        <KendoChartSeriesItem
          data={seriesData}
          type="candlestick"
          openField="Open"
          closeField="Close"
          lowField="Low"
          highField="High"
          categoryField="Date"
        />
      </KendoChartSeries>
      <KendoChartNavigator>
        <KendoChartNavigatorSelect from={from} to={to} />
        <KendoChartNavigatorSeries>
          <KendoChartNavigatorSeriesItem
            data={navigatorData}
            type="area"
            field="Close"
            categoryField="Date"
          />
        </KendoChartNavigatorSeries>
      </KendoChartNavigator>
    </StockChart>
  );
};