import React from "react";
import { Meta } from "@storybook/react";
import { ArcGaugeProps } from "./ArcGaugeProps";
import ArcGauge from "./ArcGauge";

export default {
  title: "Design System/Gauges/ArcGauge",
  component: ArcGauge,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact ArcGauge represents value ranges on its arc. \n\n```javascript\nimport { ArcGauge } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    children: {
      control: { type: "text" },
      description: "Determines the children nodes.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the component.",
    },
    color: {
      control: { type: "color" },
      description:
        "The color of the value pointer. Accepts a valid CSS color string, including hex and rgb.",
    },
    colors: {
      control: { type: "object" },
      description: "The color ranges of the value pointer.",
    },
    dir: {
      control: { type: "text" },
      description: "Represents the dir HTML attribute.",
    },
    opacity: {
      control: { type: "number" },
      description: "The opacity of the value pointer.",
    },
    renderAs: {
      control: { type: "radio", options: ["canvas", "svg"] },
      description:
        "Sets the preferred rendering engine. If not supported by the browser, the Gauge switches to the first available mode.",
    },
    scale: {
      control: { type: "object" },
      description: "The scale options of the ArcGauge.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the component.",
    },
    transitions: {
      control: { type: "boolean" },
      description:
        "If set to true, the Gauge plays animations when it displays the series. By default, animations are enabled.",
    },
    value: {
      control: { type: "number" },
      description: "The value of the Gauge.",
    },
    centerRender: {
      control: { type: "function" },
      description: "A function that renders the center template of the Gauge.",
    },
  },
} as Meta;

export const Default = (args: ArcGaugeProps): JSX.Element => {
  const colors = [
    {
      to: 25,
      color: "#0058e9",
    },
    {
      from: 25,
      to: 50,
      color: "#37b400",
    },
    {
      from: 50,
      to: 75,
      color: "#ffc000",
    },
    {
      from: 75,
      color: "#f31700",
    },
  ];

  const [value, setValue] = React.useState(8);

  React.useEffect(() => {
    setInterval(() => {
      setValue(Math.ceil(Math.random() * 100));
    }, 1000);
  }, []);

  const arcOptions: ArcGaugeProps = {
    value: value,
    colors,
  };

  const arcCenterRenderer = (value: any, color: any) => {
    return <h3 style={{ color: color }}>{value}%</h3>;
  };

  return <ArcGauge {...arcOptions} centerRender={arcCenterRenderer} />;
};

Default.args = {
  dataTestId: "arc-gauge-data-testid",
  value: 8,
};