import React from "react";
import { Meta } from "@storybook/react";
import { CircularGaugeProps } from "./CircularGaugeProps";
import CircularGauge from "./CircularGauge";
export default {
  title: "Design System/Gauges/CircularGauge",
  component: CircularGauge,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'CircularGauge is used to display value in a circular scale. It supports various properties like color, opacity, rendering mode, etc. \n\n```javascript\nimport { CircularGauge } 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: "text" },
      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.",
    },
    scale: {
      control: { type: "object" },
      description: "The scale options of the CircularGauge.",
    },
    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.",
    },
    value: {
      control: { type: "number" },
      description: "The value of the Gauge.",
    },
  },
} as Meta;

export const Default = (args: CircularGaugeProps): 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 circularOptions: CircularGaugeProps = {
    value: value,
    colors,
  };

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

  return (
    <CircularGauge {...circularOptions} centerRender={circularCenterRenderer} />
  );
};

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