import { progressPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { Progress } from "./Progress"

/**
 * The Progress component displays the completion progress of a task.
 * It can be used to show loading states, form completion, or any other progress indicator.
 */
const meta = {
  title: "base/components/Progress",
  component: Progress,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    size: {
      control: { type: "select" },
      options: progressPropDefs.size.values,
    },
    variant: {
      control: { type: "select" },
      options: progressPropDefs.variant.values,
    },
    color: {
      control: { type: "select" },
      options: progressPropDefs.color.values,
    },
    radius: {
      control: { type: "select" },
      options: progressPropDefs.radius.values,
    },
    value: {
      control: { type: "range", min: 0, max: 100, step: 1 },
    },
  },
} satisfies Meta<typeof Progress>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default progress component with 50% completion.
 */
export const Default: Story = {
  args: {
    value: 50,
  },
  render: args => (
    <div className="w-64">
      <Progress {...args} />
    </div>
  ),
}

/**
 * Different sizes of progress bars.
 */
export const Sizes: Story = {
  render: args => (
    <div className="w-64 space-y-4">
      {progressPropDefs.size.values.map(size => (
        <div key={size}>
          <div className="text-sm mb-1">{`Size ${size}`}</div>
          <Progress {...args} size={size} value={(Number.parseInt(size, 10) / 3) * 100} />
        </div>
      ))}
    </div>
  ),
}

/**
 * Different variants of progress bars.
 */
export const Variants: Story = {
  render: args => (
    <div className="w-64 space-y-4">
      {progressPropDefs.variant.values.map(variant => (
        <div key={variant}>
          <div className="text-sm mb-1 capitalize">{variant}</div>
          <Progress {...args} variant={variant} value={60} />
        </div>
      ))}
    </div>
  ),
}

/**
 * Progress bars with different colors.
 */
export const Colors: Story = {
  render: args => (
    <div className="w-64 space-y-4">
      {progressPropDefs.color.values.map(color => (
        <div key={color}>
          <div className="text-sm mb-1 capitalize">{color}</div>
          <Progress {...args} color={color} value={70} />
        </div>
      ))}
    </div>
  ),
}

/**
 * Progress bars with different corner radii.
 */
export const Radius: Story = {
  render: args => (
    <div className="w-64 space-y-4">
      {progressPropDefs.radius.values.map(radius => (
        <div key={radius}>
          <div className="text-sm mb-1 capitalize">{radius}</div>
          <Progress {...args} radius={radius} value={80} />
        </div>
      ))}
    </div>
  ),
}