import React from "react";
import { Meta } from "@storybook/react";
import ProgressBar from "./ProgressBar";
import { ProgressBarProps } from "./ProgressBarProps";
import Button from "@/components/Buttons/Button/Button";

export default {
  title: "Design System/ProgressBars/ProgressBar",
  component: ProgressBar,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The ProgressBar displays and tracks the progress of a task. \n\n```javascript\nimport { ProgressBar } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    animation: {
      control: "object",
      description: "Animation settings of the ProgressBar.",
    },
    ariaLabel: {
      control: "text",
      description: "Accessible label of the component.",
    },
    className: {
      control: "text",
      description: "CSS classes added to the ProgressBar element.",
    },
    dir: { control: "text", description: "Represents the dir HTML attribute." },
    disabled: {
      control: "boolean",
      description: "Sets the disabled state of the ProgressBar.",
    },
    emptyClassName: {
      control: "text",
      description: "Classes for the empty portion of the ProgressBar.",
    },
    emptyStyle: {
      control: "object",
      description: "Styles for the empty portion of the ProgressBar.",
    },
    label: { control: "object", description: "Overrides the default label." },
    labelPlacement: {
      control: "select",
      options: ["center", "end", "start"],
      description: "Position of the progress status label.",
    },
    labelVisible: {
      control: "boolean",
      description: "Visibility of the progress status label.",
    },
    max: {
      control: "number",
      description: "Maximum value of the ProgressBar.",
    },
    min: {
      control: "number",
      description: "Minimum value of the ProgressBar.",
    },
    orientation: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "Orientation of the ProgressBar.",
    },
    progressClassName: {
      control: "text",
      description: "Classes for the full portion of the ProgressBar.",
    },
    progressStyle: {
      control: "object",
      description: "Styles for the full portion of the ProgressBar.",
    },
    reverse: { control: "boolean", description: "Reverses the ProgressBar." },
    style: {
      control: "object",
      description: "Additional CSS styles for the ProgressBar.",
    },
    tabIndex: {
      control: "number",
      description: "TabIndex property of the ProgressBar.",
    },
    value: { control: "number", description: "Value of the ProgressBar." },
  },
} as Meta;

export const Default = (args: ProgressBarProps): JSX.Element => {
  const { value, start, stop, reset } = useInterval(0, 50);

  function useInterval(initialValue: number, ms: number | undefined) {
    const [value, setValue] = React.useState(initialValue);
    const intervalRef = React.useRef<any>(null);
    let val = 0;

    const start = React.useCallback(() => {
      if (intervalRef.current !== null) {
        return;
      }

      intervalRef.current = setInterval(() => {
        if (val < 100) {
          setValue((v) => v + 1);
          val = val + 1;
        }
      }, ms);
    }, []);
    const stop = React.useCallback(() => {
      if (intervalRef.current === null) {
        return;
      }
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }, []);
    const reset = React.useCallback(() => {
      setValue(0);
      val = 0;
    }, []);
    return { value, start, stop, reset };
  }

  return (
    <div>
      <div className="text-center" style={{ display: "flex", gap: "1rem" }}>
        <Button onClick={start}>start</Button>
        <Button onClick={stop}>stop</Button>
        <Button onClick={reset}>reset</Button>
      </div>
      <br />
      <ProgressBar value={value} {...args} />
    </div>
  );
};