import type { Meta, StoryObj } from "@storybook/react"
import React from "react"
import { Slider } from "./Slider"

/**
 * A slider component for selecting values within a range.
 *
 * ## Props
 * - `defaultValue`: number[] - Default value(s) for the slider
 * - `value`: number[] - Controlled value(s) for the slider
 * - `onValueChange`: (value: number[]) => void - Callback when value changes
 * - `onValueCommit`: (value: number[]) => void - Callback when value is committed
 * - `min`: number - Minimum value (default: 0)
 * - `max`: number - Maximum value (default: 100)
 * - `step`: number - Step increment (default: 1)
 * - `minStepsBetweenThumbs`: number - Minimum steps between thumbs
 * - `disabled`: boolean - Whether the slider is disabled
 * - `orientation`: "horizontal" | "vertical" - Orientation of the slider
 * - `inverted`: boolean - Whether the slider is inverted
 * - `color`: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky"
 * - `size`: "1" | "2" | "3" (default: "2")
 * - `variant`: "classic" | "surface" | "soft" (default: "surface")
 * - `radius`: "none" | "small" | "medium" | "large" | "full"
 * - `highContrast`: boolean - Whether to use high contrast colors
 */
const meta = {
  title: "base/components/Slider",
  component: Slider,
  tags: ["autodocs"],
  argTypes: {
    defaultValue: {
      control: "object",
      description: "Default value(s) for the slider",
    },
    min: {
      control: "number",
      description: "Minimum value",
    },
    max: {
      control: "number",
      description: "Maximum value",
    },
    step: {
      control: "number",
      description: "Step increment",
    },
    disabled: {
      control: "boolean",
      description: "Whether the slider is disabled",
    },
    orientation: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "Orientation of the slider",
    },
    color: {
      control: "select",
      options: [
        "gray",
        "gold",
        "bronze",
        "brown",
        "yellow",
        "amber",
        "orange",
        "tomato",
        "red",
        "ruby",
        "crimson",
        "pink",
        "plum",
        "purple",
        "violet",
        "iris",
        "indigo",
        "blue",
        "cyan",
        "teal",
        "jade",
        "green",
        "grass",
        "lime",
        "mint",
        "sky",
      ],
      description: "Color theme of the slider",
    },
    size: {
      control: "select",
      options: ["1", "2", "3"],
      description: "Size of the slider",
    },
    variant: {
      control: "select",
      options: ["classic", "surface", "soft"],
      description: "Visual style of the slider",
    },
    radius: {
      control: "select",
      options: ["none", "small", "medium", "large", "full"],
      description: "Border radius of the slider",
    },
    highContrast: {
      control: "boolean",
      description: "Whether to use high contrast colors",
    },
  },
  parameters: {
    layout: "centered",
  },
} satisfies Meta<typeof Slider>

export default meta

type Story = StoryObj<typeof meta>

/**
 * Basic slider with default settings.
 */
export const Default: Story = {
  args: {
    defaultValue: [50],
  },
  render: args => (
    <div className="w-64">
      <label htmlFor="default-slider" className="block text-sm font-medium mb-2">
        Default Slider
      </label>
      <Slider id="default-slider" {...args} />
    </div>
  ),
}

/**
 * Slider with different colors.
 */
export const Colors: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-gray" className="block text-sm font-medium mb-2">
          Gray
        </label>
        <Slider id="slider-gray" defaultValue={[50]} color="gray" />
      </div>
      <div>
        <label htmlFor="slider-blue" className="block text-sm font-medium mb-2">
          Blue
        </label>
        <Slider id="slider-blue" defaultValue={[50]} color="blue" />
      </div>
      <div>
        <label htmlFor="slider-green" className="block text-sm font-medium mb-2">
          Green
        </label>
        <Slider id="slider-green" defaultValue={[50]} color="green" />
      </div>
      <div>
        <label htmlFor="slider-purple" className="block text-sm font-medium mb-2">
          Purple
        </label>
        <Slider id="slider-purple" defaultValue={[50]} color="purple" />
      </div>
      <div>
        <label htmlFor="slider-red" className="block text-sm font-medium mb-2">
          Red
        </label>
        <Slider id="slider-red" defaultValue={[50]} color="red" />
      </div>
    </div>
  ),
}

/**
 * Slider with different sizes.
 */
export const Sizes: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-size1" className="block text-sm font-medium mb-2">
          Size 1
        </label>
        <Slider id="slider-size1" defaultValue={[50]} size="1" />
      </div>
      <div>
        <label htmlFor="slider-size2" className="block text-sm font-medium mb-2">
          Size 2 (Default)
        </label>
        <Slider id="slider-size2" defaultValue={[50]} size="2" />
      </div>
      <div>
        <label htmlFor="slider-size3" className="block text-sm font-medium mb-2">
          Size 3
        </label>
        <Slider id="slider-size3" defaultValue={[50]} size="3" />
      </div>
    </div>
  ),
}

/**
 * Slider with different variants.
 */
export const Variants: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-classic" className="block text-sm font-medium mb-2">
          Classic
        </label>
        <Slider id="slider-classic" defaultValue={[50]} variant="classic" />
      </div>
      <div>
        <label htmlFor="slider-surface" className="block text-sm font-medium mb-2">
          Surface (Default)
        </label>
        <Slider id="slider-surface" defaultValue={[50]} variant="surface" />
      </div>
      <div>
        <label htmlFor="slider-soft" className="block text-sm font-medium mb-2">
          Soft
        </label>
        <Slider id="slider-soft" defaultValue={[50]} variant="soft" />
      </div>
    </div>
  ),
}

/**
 * Slider with different radius values.
 */
export const Radius: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-none" className="block text-sm font-medium mb-2">
          None
        </label>
        <Slider id="slider-none" defaultValue={[50]} radius="none" />
      </div>
      <div>
        <label htmlFor="slider-small" className="block text-sm font-medium mb-2">
          Small
        </label>
        <Slider id="slider-small" defaultValue={[50]} radius="small" />
      </div>
      <div>
        <label htmlFor="slider-medium" className="block text-sm font-medium mb-2">
          Medium
        </label>
        <Slider id="slider-medium" defaultValue={[50]} radius="medium" />
      </div>
      <div>
        <label htmlFor="slider-large" className="block text-sm font-medium mb-2">
          Large
        </label>
        <Slider id="slider-large" defaultValue={[50]} radius="large" />
      </div>
      <div>
        <label htmlFor="slider-full" className="block text-sm font-medium mb-2">
          Full
        </label>
        <Slider id="slider-full" defaultValue={[50]} radius="full" />
      </div>
    </div>
  ),
}

/**
 * Slider with high contrast.
 */
export const HighContrast: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-normal" className="block text-sm font-medium mb-2">
          Normal Contrast
        </label>
        <Slider id="slider-normal" defaultValue={[50]} color="blue" />
      </div>
      <div>
        <label htmlFor="slider-high" className="block text-sm font-medium mb-2">
          High Contrast
        </label>
        <Slider id="slider-high" defaultValue={[50]} color="blue" highContrast />
      </div>
    </div>
  ),
}

/**
 * Slider with different ranges.
 */
export const Ranges: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-0-100" className="block text-sm font-medium mb-2">
          0-100
        </label>
        <Slider id="slider-0-100" defaultValue={[50]} />
      </div>
      <div>
        <label htmlFor="slider-0-1000" className="block text-sm font-medium mb-2">
          0-1000
        </label>
        <Slider id="slider-0-1000" defaultValue={[500]} min={0} max={1000} />
      </div>
      <div>
        <label htmlFor="slider-neg50-50" className="block text-sm font-medium mb-2">
          -50 to 50
        </label>
        <Slider id="slider-neg50-50" defaultValue={[0]} min={-50} max={50} />
      </div>
      <div>
        <label htmlFor="slider-0-1" className="block text-sm font-medium mb-2">
          0-1 (0.1 step)
        </label>
        <Slider id="slider-0-1" defaultValue={[0.5]} min={0} max={1} step={0.1} />
      </div>
    </div>
  ),
}

/**
 * Slider with different step values.
 */
export const Steps: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-step1" className="block text-sm font-medium mb-2">
          Step 1 (default)
        </label>
        <Slider id="slider-step1" defaultValue={[50]} />
      </div>
      <div>
        <label htmlFor="slider-step5" className="block text-sm font-medium mb-2">
          Step 5
        </label>
        <Slider id="slider-step5" defaultValue={[50]} step={5} />
      </div>
      <div>
        <label htmlFor="slider-step10" className="block text-sm font-medium mb-2">
          Step 10
        </label>
        <Slider id="slider-step10" defaultValue={[50]} step={10} />
      </div>
      <div>
        <label htmlFor="slider-step25" className="block text-sm font-medium mb-2">
          Step 25
        </label>
        <Slider id="slider-step25" defaultValue={[50]} step={25} />
      </div>
    </div>
  ),
}

/**
 * Slider with multiple thumbs.
 */
export const MultipleThumbs: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-range" className="block text-sm font-medium mb-2">
          Range Slider (2 thumbs)
        </label>
        <Slider id="slider-range" defaultValue={[25, 75]} />
      </div>
      <div>
        <label htmlFor="slider-triple" className="block text-sm font-medium mb-2">
          Triple Slider (3 thumbs)
        </label>
        <Slider id="slider-triple" defaultValue={[20, 50, 80]} />
      </div>
      <div>
        <label htmlFor="slider-price" className="block text-sm font-medium mb-2">
          Price Range
        </label>
        <Slider id="slider-price" defaultValue={[100, 500]} min={0} max={1000} step={10} />
      </div>
    </div>
  ),
}

/**
 * Slider with controlled state.
 */
export const Controlled: Story = {
  render: () => {
    const [value, setValue] = React.useState([50])

    return (
      <div className="space-y-4 w-64">
        <div>
          <label htmlFor="slider-controlled" className="block text-sm font-medium mb-2">
            Controlled Slider: {value[0]}
          </label>
          <Slider id="slider-controlled" value={value} onValueChange={setValue} />
        </div>
        <div className="flex gap-2">
          <button
            type="button"
            onClick={() => setValue([Math.max(0, value[0] - 10)])}
            className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
          >
            -10
          </button>
          <button
            type="button"
            onClick={() => setValue([Math.min(100, value[0] + 10)])}
            className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"
          >
            +10
          </button>
          <button
            type="button"
            onClick={() => setValue([50])}
            className="px-3 py-1 bg-gray-600 text-white rounded hover:bg-gray-700 text-sm"
          >
            Reset
          </button>
        </div>
      </div>
    )
  },
}

/**
 * Slider with different orientations.
 */
export const Orientations: Story = {
  render: () => (
    <div className="flex gap-8">
      <div className="w-64">
        <label htmlFor="slider-horizontal" className="block text-sm font-medium mb-2">
          Horizontal
        </label>
        <Slider id="slider-horizontal" defaultValue={[50]} orientation="horizontal" />
      </div>
      <div>
        <label htmlFor="slider-vertical" className="block text-sm font-medium mb-2">
          Vertical
        </label>
        <div className="h-32">
          <Slider id="slider-vertical" defaultValue={[50]} orientation="vertical" />
        </div>
      </div>
    </div>
  ),
}

/**
 * Slider with disabled state.
 */
export const Disabled: Story = {
  render: () => (
    <div className="space-y-4 w-64">
      <div>
        <label htmlFor="slider-enabled" className="block text-sm font-medium mb-2">
          Enabled
        </label>
        <Slider id="slider-enabled" defaultValue={[50]} />
      </div>
      <div>
        <label htmlFor="slider-disabled" className="block text-sm font-medium mb-2">
          Disabled
        </label>
        <Slider id="slider-disabled" defaultValue={[50]} disabled />
      </div>
      <div>
        <label htmlFor="slider-disabled-range" className="block text-sm font-medium mb-2">
          Disabled Range
        </label>
        <Slider id="slider-disabled-range" defaultValue={[25, 75]} disabled />
      </div>
    </div>
  ),
}

/**
 * Slider with value display.
 */
export const WithValueDisplay: Story = {
  render: () => {
    const [value, setValue] = React.useState([50])

    return (
      <div className="space-y-4 w-64">
        <div className="flex justify-between items-center">
          <label htmlFor="slider-volume" className="text-sm font-medium">
            Volume
          </label>
          <span className="text-sm text-gray-500">{value[0]}%</span>
        </div>
        <Slider id="slider-volume" value={value} onValueChange={setValue} />
        <div className="flex justify-between text-xs text-gray-400">
          <span>0%</span>
          <span>100%</span>
        </div>
      </div>
    )
  },
}

/**
 * Slider with different contexts.
 */
export const Contexts: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-volume-control" className="block text-sm font-medium mb-2">
          Volume Control
        </label>
        <Slider id="slider-volume-control" defaultValue={[75]} color="blue" />
      </div>
      <div>
        <label htmlFor="slider-brightness" className="block text-sm font-medium mb-2">
          Brightness
        </label>
        <Slider id="slider-brightness" defaultValue={[60]} color="yellow" />
      </div>
      <div>
        <label htmlFor="slider-temperature" className="block text-sm font-medium mb-2">
          Temperature (°C)
        </label>
        <Slider id="slider-temperature" defaultValue={[22]} min={10} max={35} color="red" />
      </div>
      <div>
        <label htmlFor="slider-price-range" className="block text-sm font-medium mb-2">
          Price Range ($)
        </label>
        <Slider
          id="slider-price-range"
          defaultValue={[100, 500]}
          min={0}
          max={1000}
          step={10}
          color="green"
        />
      </div>
    </div>
  ),
}

/**
 * Slider with inverted orientation.
 */
export const Inverted: Story = {
  render: () => (
    <div className="space-y-6 w-64">
      <div>
        <label htmlFor="slider-normal" className="block text-sm font-medium mb-2">
          Normal
        </label>
        <Slider id="slider-normal" defaultValue={[50]} color="blue" />
      </div>
      <div>
        <label htmlFor="slider-inverted" className="block text-sm font-medium mb-2">
          Inverted
        </label>
        <Slider id="slider-inverted" defaultValue={[50]} color="blue" inverted />
      </div>
    </div>
  ),
}