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

type StoryType = StoryObj<typeof Slider>;

const meta: Meta<typeof Slider> = {
  title: "Components/Slider",
  component: Slider,
  // Note: minValue, maxValue, defaultValue only work with certain settings.
  argTypes: {
    // For example, minValue: 0, maxValue: 100, defaultValue: 25 work well, but
    // minValue: 50, maxValue: 500, defaultValue: 0 break. Hiding these controls
    // will still allow users to interact with example settings, but without
    // allowing the user to break the UI.
    ...excludeControls("minValue", "maxValue", "defaultValue", "formatOptions"),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Primary: StoryType = {
  render: (args: SliderProps) => <Slider {...args} />,
  args: {
    label: "Tools value",
    minValue: 20,
    maxValue: 500,
    defaultValue: 100,
    variant: "primary",
    minLabel: "",
    maxLabel: "",
    isDisabled: false,
  },
};

export const Secondary: StoryType = {
  render: (args: SliderProps) => <Slider {...args} />,
  args: {
    label: "Tools value",
    minValue: 20,
    maxValue: 500,
    defaultValue: 100,
    variant: "secondary",
    minLabel: "",
    maxLabel: "",
    isDisabled: false,
  },
};

export const Formatted: StoryType = {
  render: (args: SliderProps) => <Slider {...args} />,
  args: {
    label: "Tools value",
    minValue: 20,
    maxValue: 500,
    defaultValue: 100,
    variant: "primary",
    minLabel: "",
    maxLabel: "",
    isDisabled: false,
    formatOptions: { style: "currency", currency: "EUR" },
  },
};

export const NoLabel: StoryType = {
  render: (args: SliderProps) => <Slider {...args} />,
  args: {
    label: "",
    "aria-label": "Tools value",
    minValue: 20,
    maxValue: 500,
    variant: "primary",
    defaultValue: 100,
    minLabel: "",
    maxLabel: "",
    isDisabled: false,
  },
};

export const Disabled: StoryType = {
  render: (args: SliderProps) => <Slider {...args} />,
  args: {
    label: "Tools value",
    minValue: 20,
    maxValue: 500,
    variant: "primary",
    defaultValue: 100,
    minLabel: "",
    maxLabel: "",
    isDisabled: true,
  },
};

export default meta;
