import React from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Slider } from './Slider';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
// More on args: https://storybook.js.org/docs/react/writing-stories/args

export default {
  title: 'ReactComponentLibrary/Slider',
  component: Slider,
} as ComponentMeta<typeof Slider>;

const Template: ComponentStory<typeof Slider> = (args) => <Slider {...args} />;

export const DefaultSlider = Template.bind({});
DefaultSlider.args = {
  onAfterChange: (): void => {},
};

export const TextLabelsSlider = Template.bind({});

const textLabelSliderDefaultValue = 0;
const textLabelSliderStepValuesValue1 = 1;
const textLabelSliderStepValuesValue2 = 2;
const textLabelSliderStepValuesValue3 = 3;

TextLabelsSlider.args = {
  defaultValue: textLabelSliderDefaultValue,
  onAfterChange: (): void => {},
  stepValues: [
    { label: '10%', value: textLabelSliderStepValuesValue1 },
    { label: '50', value: textLabelSliderStepValuesValue2 },
    { label: '1K+%', value: textLabelSliderStepValuesValue3 },
  ],
};

export const TwoThumbsSlider = Template.bind({});

const twoThumbsSliderMinValue = 0;
const twoThumbsSliderMaxValue = 15;
const twoThumbsSliderDefaultValue1 = 1;
const twoThumbsSliderDefaultValue2 = 13;

TwoThumbsSlider.args = {
  min: twoThumbsSliderMinValue,
  max: twoThumbsSliderMaxValue,
  defaultValue: [twoThumbsSliderDefaultValue1, twoThumbsSliderDefaultValue2],
  onAfterChange: (): void => {},
};

export const TwoThumbsWithLabelsSlider = Template.bind({});
const twoThumbsSliderWithLabelsMinValue = 0;
const twoThumbsSliderWithLabelsMaxValue = 5;
const twoThumbsSliderWithLabelsDefaultValue1 = 1;
const twoThumbsSliderWithLabelsDefaultValue2 = 4;
const twoThumbsSliderWithLabelsValue2 = 2;
const twoThumbsSliderWithLabelsValue3 = 3;

TwoThumbsWithLabelsSlider.args = {
  min: twoThumbsSliderWithLabelsMinValue,
  max: twoThumbsSliderWithLabelsMaxValue,
  defaultValue: [twoThumbsSliderWithLabelsDefaultValue1, twoThumbsSliderWithLabelsDefaultValue2],
  onAfterChange: (): void => {},
  stepValues: [
    { label: '0%', value: twoThumbsSliderWithLabelsDefaultValue1 },
    { label: '1%', value: twoThumbsSliderWithLabelsDefaultValue1 },
    { label: '1+%', value: twoThumbsSliderWithLabelsValue2 },
    { label: '3%', value: twoThumbsSliderWithLabelsValue3 },
    { label: '1K%', value: twoThumbsSliderWithLabelsDefaultValue2 },
    { label: '1K+%', value: twoThumbsSliderWithLabelsDefaultValue2 },
  ],
};