import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import { UiSlider } from '.';

/**
 * UiSlider lets users pick a numeric value (single thumb) or a range (multiple thumbs) by dragging.
 * Use it for filters and settings where immediate, continuous feedback is helpful.
 */
const meta: Meta<typeof UiSlider> = {
  title: 'Components/UiSlider',
  component: UiSlider,
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'object',
      description:
        'Controlled slider value (array of numbers). Use `[value]` for a single thumb and `[min, max]` for a range.',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the slider is disabled.',
    },
    min: {
      control: { type: 'number' },
      description: 'Minimum value.',
    },
    max: {
      control: { type: 'number' },
      description: 'Maximum value.',
    },
    step: {
      control: { type: 'number' },
      description: 'Step size.',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'Slider orientation.',
    },
    inverted: {
      control: 'boolean',
      description:
        'Whether the slider direction is visually inverted (low/high swapped).',
    },
  },
  args: {
    modelValue: [50],
    disabled: false,
    min: 0,
    max: 100,
    step: 1,
    orientation: 'horizontal',
    inverted: false,
  },
};

export default meta;
type Story = StoryObj<typeof UiSlider>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiSlider } from '@aleph-alpha/ui-library'

const value = ref([50])
</script>

<template>
  <div class="w-72 gap-y-3">
    <UiSlider v-model="value" :min="0" :max="100" :step="1" />
    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
  </div>
</template>`;

/**
 * Single-thumb slider for selecting a single numeric value.
 * Use this for settings like volume/zoom/opacity.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiSlider },
    setup() {
      const value = ref<number[]>(
        Array.isArray(args.modelValue) ? args.modelValue : [50],
      );
      watch(
        () => args.modelValue,
        (val) => {
          value.value = Array.isArray(val) ? val : [50];
        },
      );
      return { args, value };
    },
    template: `
      <div class="w-72 gap-y-3">
        <UiSlider
          v-model="value"
          :disabled="args.disabled"
          :min="args.min"
          :max="args.max"
          :step="args.step"
          :orientation="args.orientation"
          :inverted="args.inverted"
        />
        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
      </div>
    `,
  }),
  parameters: {
    docs: { source: { code: defaultTemplateSource } },
  },
};

const rangeTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiSlider } from '@aleph-alpha/ui-library'

const range = ref([25, 75])
</script>

<template>
  <div class="w-72 gap-y-3">
    <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
    <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
  </div>
</template>`;

/**
 * Multi-thumb slider for selecting a min/max range.
 * Use this for filters like price ranges or rating ranges.
 */
export const Range: Story = {
  render: () => ({
    components: { UiSlider },
    setup() {
      const range = ref([25, 75]);
      return { range };
    },
    template: `
      <div class="w-72 gap-y-3">
        <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
        <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: rangeTemplateSource } },
  },
};

const verticalTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiSlider } from '@aleph-alpha/ui-library'

const value = ref([50])
</script>

<template>
  <div class="flex items-center gap-6">
    <div class="h-44">
      <UiSlider v-model="value" orientation="vertical" />
    </div>
    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
  </div>
</template>`;

/**
 * Vertical slider orientation.
 * Use this when horizontal space is limited or when matching an existing vertical control pattern.
 */
export const Vertical: Story = {
  render: () => ({
    components: { UiSlider },
    setup() {
      const value = ref([50]);
      return { value };
    },
    template: `
      <div class="flex items-center gap-6">
        <div class="h-44">
          <UiSlider v-model="value" orientation="vertical" />
        </div>
        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: verticalTemplateSource } },
  },
};

const disabledTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiSlider } from '@aleph-alpha/ui-library'

const value = ref([50])
</script>

<template>
  <div class="w-72 gap-y-3">
    <UiSlider v-model="value" disabled />
    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
  </div>
</template>`;

/**
 * Disabled state.
 * Use this when the slider is not currently applicable (e.g., gated behind another toggle).
 */
export const Disabled: Story = {
  render: () => ({
    components: { UiSlider },
    setup() {
      const value = ref([50]);
      return { value };
    },
    template: `
      <div class="w-72 gap-y-3">
        <UiSlider v-model="value" disabled />
        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: disabledTemplateSource } },
  },
};
