import React, { useState } from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'
import SliderComponent from './Slider'

const meta: Meta<typeof SliderComponent> = {
  title: 'Components/FormComponents/Slider',
  component: SliderComponent,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=777-6437&t=9R4mlUY42yEaNlLp-4',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=777-6437&t=9R4mlUY42yEaNlLp-4'
          description={
            <span>
              The <code>Slider</code> component is a form element used to keep
              track of a single numerical value within a defined range. It
              allows users to slide a handle along a track to select a specific
              numeric value. <code>Slider</code>s are commonly used for
              settings, input ranges, and other scenarios where precise numeric
              input is required.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Implement the <code>Slider</code> component in forms or settings
              sections where users need to choose a numeric value from a defined
              range.
            </span>,
            <span key='second-bullet'>
              Ensure the <code>Slider</code> component is labeled clearly and
              concisely to aid user comprehension and efficient selection.
            </span>,
            <span key='third-bullet'>
              If needed, include a tooltip to provide additional context or
              description for the <code>Slider</code>.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof SliderComponent>

const Template: Story = {
  render: function Render(args) {
    const [threshold, setThreshold] = useState<number>(args.value)

    const updateThreshold = (value: number) => {
      setThreshold(value)
    }

    return (
      <SliderComponent
        {...args}
        value={threshold}
        updateValue={updateThreshold}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Basic Slider',
  },
}

export const Required: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Basic Slider',
    required: true,
  },
}

export const Tooltip: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Slider Tooltip',
    tooltip: {
      tooltipContent: 'This is the slider tooltip',
    },
  },
}

export const LabelTooltip: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Label Tooltip',
    labelTooltip: {
      tooltipContent: 'This is the label tooltip',
    },
  },
}

export const RightLabel: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Label',
    rightLabel: 'Right Label',
  },
}

export const Steps: Story = {
  ...Template,
  args: {
    value: 25,
    label: 'Slider With Steps',
    step: 25,
  },
}

export const LargeNumber: Story = {
  ...Template,
  args: {
    value: 1500000,
    label: 'Large Number',
    min: 1000000,
    max: 2000000,
    step: 100000,
  },
}

export const Percentage: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Percentage',
    suffix: '%',
  },
}

export const Currency: Story = {
  ...Template,
  args: {
    value: 32,
    label: 'Currency',
    prefix: '$',
  },
}

export const Debounce: Story = {
  render: function Render(args) {
    const [value, setValue] = useState<number>(args.value)

    return (
      <>
        <div className='pb-4 text-xs'>
          There is a delay of {args.debounce}ms after each movement of the
          slider
        </div>
        <SliderComponent {...args} value={value} updateValue={setValue} />
        <div className='pt-4'>Debounced Value: {value}</div>
      </>
    )
  },
  args: {
    value: 5,
    label: 'Debounce',
    debounce: 500,
  },
}