import type { Meta, StoryObj } from "@storybook/react";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";
import type { ProgressProps } from "./Progress";
import { Progress } from "./Progress";

type StoryType = StoryObj<typeof Progress>;

const meta: Meta<typeof Progress> = {
  title: "Components/Progress",
  component: Progress,
  argTypes: {
    value: {
      control: {
        control: { type: "range" },
        min: 0,
        max: 10,
        step: 1,
      },
    },
    minValue: {
      control: {
        control: { type: "range" },
        min: 0,
        max: 10,
        step: 1,
      },
    },
    maxValue: {
      control: {
        control: { type: "range" },
        min: 0,
        max: 10,
        step: 1,
      },
    },
    label: {
      control: {
        control: { type: "text" },
      },
    },
    variant: {
      control: { type: "radio" },
      options: ["primary", "secondary"],
    },
    ...excludeControls("valueFormatter"),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

const customValueFormatter = (
  value: number,
  _minValue: number,
  maxValue: number,
) => `Step ${value} of ${maxValue}`;

export const Primary: StoryType = {
  render: (args: ProgressProps) => <Progress {...args} />,
  args: {
    value: 2,
    minValue: 0,
    maxValue: 10,
    label: "Progress",
    variant: "primary",
    showValueLabel: true,
  },
};

export const Secondary: StoryType = {
  render: (args: ProgressProps) => <Progress {...args} />,
  args: {
    value: 2,
    minValue: 0,
    maxValue: 10,
    label: "Secondary",
    variant: "secondary",
    showValueLabel: true,
  },
};

export const NoVisibleLabel: StoryType = {
  render: (args: ProgressProps) => <Progress {...args} />,
  args: {
    value: 1,
    minValue: 0,
    maxValue: 4,
    label: "Primary",
    showLabel: false,
    variant: "primary",
    "aria-label": "Progress",
    showValueLabel: true,
  },
  parameters: {
    controls: {
      exclude: ["aria-label"],
    },
  },
};

export const CustomValueFormat: StoryType = {
  render: (args: ProgressProps) => <Progress {...args} />,
  args: {
    value: 1,
    minValue: 0,
    maxValue: 4,
    label: "Progress",
    variant: "primary",
    showValueLabel: true,
    valueFormatter: customValueFormatter,
  },
};

export default meta;
