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

export default {
  title: "Design System/ProgressBars/ChunkProgressBar",
  component: ChunkProgressBar,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The ChunkProgressBar displays and tracks the progress of a task as a predefined number of chunks. \n\n```javascript\nimport { ChunkProgressBar } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaLabel: {
      control: "text",
      description: "Accessible label of the component.",
    },
    chunkCount: {
      control: "number",
      description: "Number of chunks for the ProgressBar.",
    },
    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.",
    },
    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: ChunkProgressBarProps): JSX.Element => {
  const [value, setValue] = React.useState(20);

  const handleIncrease = () => {
    if (value < 100) {
      setValue(value + 20);
    }
  };

  const handleDecrease = () => {
    if (value > 0) {
      setValue(value - 20);
    }
  };

  return (
    <>
      <div style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
        <Button
          disabled={value === 0}
          icon={"rewind"}
          onClick={handleDecrease}
        ></Button>
        <Button
          disabled={value === 100}
          themeColor={"primary"}
          icon={"forward"}
          onClick={handleIncrease}
        ></Button>
      </div>
      <ChunkProgressBar value={value} />
    </>
  );
};