import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { Progress } from './progress';

const meta = {
  title: 'Components/Progress',
  component: Progress,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Determinate progress bar. Omit `value` for an indeterminate task and Radix reports it as such to assistive technology.\n\nTakes `size` (`md` 6px, `lg` 9px — CBAR’s two heights) and `colorPalette`. For a circular version see `ProgressCircle`, which ships from the same subpath.',
      },
    },
  },
  tags: ['autodocs'],
  args: { value: 60 },
  decorators: [(Story) => <div className="w-72"><Story /></div>],
} satisfies Meta<typeof Progress>;

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

export const Default: Story = {};

export const Steps: Story = {
  render: () => (
    <div className="grid gap-4">
      {[0, 25, 50, 75, 100].map((value) => (
        <Progress key={value} value={value} />
      ))}
    </div>
  ),
};

/** Both of CBAR's heights, on the palettes a progress bar usually carries. */
export const Sizes: Story = {
  render: () => (
    <div className="grid gap-4">
      <Progress size="md" value={40} />
      <Progress size="lg" value={40} />
      <Progress size="lg" value={70} colorPalette="green" />
      <Progress size="lg" value={90} colorPalette="red" />
    </div>
  ),
};

export const Animated: Story = {
  render: function AnimatedStory() {
    const [value, setValue] = React.useState(10);

    React.useEffect(() => {
      const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 10)), 700);
      return () => clearInterval(id);
    }, []);

    return <Progress value={value} />;
  },
};