import { Meta, Story } from '@storybook/react';
import React, { useState } from 'react';
import {
  IRangeSliderProps,
  RangeSlider,
  RangeSliderType,
} from '../../../components/RangeSlider';
import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';

const meta: Meta = {
  title: 'UI/Sliders/Slider',
  component: RangeSlider,
  argTypes: {
    type: {
      control: {
        type: 'select',
        labels: {
          [RangeSliderType.Slider]: 'slider',
          [RangeSliderType.GoldSlider]: 'golden-slider',
        },
      },
    },
    valueMin: {
      control: {
        type: 'number',
      },
    },
    valueMax: {
      control: {
        type: 'number',
      },
    },
    value: {
      control: {
        type: 'number',
      },
    },
  },
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<IRangeSliderProps> = args => {
  const [value, setValue] = useState(50);

  return (
    <RPGUIRoot>
      <RangeSlider {...args} value={value} onChange={setValue} />
    </RPGUIRoot>
  );
};

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const Default = Template.bind({});

Default.args = {
  type: RangeSliderType.Slider,
  valueMin: 0,
  valueMax: 100,
  step: 0.5,
};
