import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Progress } from "./progress";
import { ActionButton } from "./ActionButton/ActionButton";
import { useState } from "react";

/** Reusable Progress Component */
const meta: Meta<typeof Progress> = {
  title: "Shadcn UI/Progress",
  component: Progress,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    value: 50,
  },
  argTypes: {
    value: {
      control: { type: "range", min: 0, max: 100, step: 1 },
      description: "Progress value from 0 to 100",
    },
    label: {
      control: { type: "text" },
      description: "Progress label",
    },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
  args: {
    value: 50,
  },
} satisfies Story;

export const Empty = {
  args: {
    value: 0,
  },
} satisfies Story;

export const Quarter = {
  args: {
    value: 25,
  },
} satisfies Story;

export const Half = {
  args: {
    value: 50,
  },
} satisfies Story;

export const ThreeQuarters = {
  args: {
    value: 75,
  },
} satisfies Story;

export const Complete = {
  args: {
    value: 100,
  },
} satisfies Story;

export const CustomColors = {
  args: {
    value: 80,
    classNameProgressContainer: "bg-green-200 [&>div]:bg-green-600",
  },
} satisfies Story;

export const Animated = {
  args: {
    value: 0,
  },
  decorators: [
    (Story) => {
      const [progress, setProgress] = useState(0);

      const handleSetRandomValue = () => {
        setProgress(Math.floor(Math.random() * 100));
      };

      return (
        <div className="w-full flex flex-col gap-8">
          <Story args={{ value: progress }} />
          <ActionButton onClick={handleSetRandomValue}>
            Set random value
          </ActionButton>
        </div>
      );
    },
  ],
} satisfies Story;

export const WithLabel = {
  args: {
    label: "1 of 15",
  },
} satisfies Story;
