/* eslint-disable react-hooks/rules-of-hooks */
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { RangeSlider } from "./range-slider";

const meta = {
  title: "UI/Range Slider",
  component: RangeSlider,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof RangeSlider>;

export default meta;

type Story = StoryObj<typeof RangeSlider>;
type RangeValue = { start: number; end: number };

export const RangeSliderDefualt: Story = {
  render: () => {
    const [value, setValue] = useState<RangeValue | number>(10);
    return (
      <RangeSlider
        isMultiple={false}
        min={0}
        max={100}
        value={value}
        onChange={(values) => setValue(values)}
      />
    );
  },
};

export const RangeSliderMulti: Story = {
  render: () => {
    const [value, setValue] = useState<RangeValue | number>({
      start: 20,
      end: 30,
    });
    return (
      <RangeSlider
        isMultiple
        value={value}
        min={0}
        max={100}
        onChange={(values) => setValue(values)}
      />
    );
  },
};