import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Slider, SliderProps } from "./Slider"

type Story = StoryObj<typeof Slider>

const meta: Meta<typeof Slider> = {
  title: "Design System/Slider",
  component: Slider,
  args: { min: 0, max: 30, value: 15 },
}

export default meta

const Template = (args: SliderProps) => {
  const [value, setValue] = useState(args.value)

  return <Slider {...args} value={value} onValueChange={setValue} />
}

export const Default: Story = {
  render: Template,
}

export const EqualValueMinAndMax: Story = {
  render: Template,
  args: {
    min: 1,
    max: 100,
    value: 100,
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
}

export const AllVariants: Story = {
  render: (args: SliderProps) => {
    return (
      <TestGridContainer>
        <Slider {...args} {...Default.args} />
        <Slider {...args} {...EqualValueMinAndMax.args} />
        <Slider {...args} {...Disabled.args} />
      </TestGridContainer>
    )
  },
}