import { useState } from 'react';

import { Meta } from '@storybook/react';

import { CustomRange, RangeWithControls, CommonRange } from '@/components/inputs';

const meta: Meta<typeof CommonRange> = {
  component: CommonRange,
};

export default meta;

export function Primary() {
  const [currentValue, setCurrentValue] = useState(4);

  return (
    <div className="flex flex-col gap-4">
      <CommonRange min={0} max={100} step={1} onChange={value => setCurrentValue(value)} value={50} isLocked={true} />
      <CommonRange
        min={4}
        max={100}
        step={1}
        onChange={value => setCurrentValue(value)}
        value={currentValue}
        isLocked={false}
      />
      <CommonRange
        min={0}
        max={100}
        step={1}
        onChange={value => setCurrentValue(value)}
        value={currentValue}
        isLocked={false}
      />
    </div>
  );
}

export function ControlButtons() {
  const [currentValue, setCurrentValue] = useState(0);

  return (
    <div className="flex flex-col gap-4">
      <RangeWithControls min={0} max={100} step={1} onChange={value => setCurrentValue(value)} value={currentValue} />
      <RangeWithControls
        min={0}
        max={100}
        step={1}
        isLocked={true}
        onChange={value => setCurrentValue(value)}
        value={0}
      />
    </div>
  );
}

export function RadioButton() {
  const [currentValue, setCurrentValue] = useState(0);

  return (
    <CustomRange
      min={0}
      max={100}
      step={1}
      maxPercentValue={100}
      onChange={value => setCurrentValue(value)}
      value={currentValue}
    />
  );
}