import { Meta } from "@storybook/react";
import { RangeSliderProps } from "./RangeSliderProps";
import RangeSlider from "./RangeSlider";
import { SliderLabel } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Inputs/RangeSlider",
  component: RangeSlider,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact RangeSlider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the value on the scale or using the arrow keys. \n\n```javascript\nimport { Input } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaDescribedBy: {
      control: { type: "text" },
      description:
        "Identifies the element(s) which will describe the component.",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Identifies the element(s) which will label the component.",
    },
    children: {
      control: { type: "text" },
      description: "Determines the children nodes.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the RangeSlider.",
    },
    defaultValue: {
      control: { type: "object" },
      description: "The default set values of type Range - start and end.",
    },
    dir: {
      control: { type: "radio", options: ["ltr", "rtl"] },
      description: "The RangeSlider direction ltr or rtl.",
    },
    disabled: {
      control: { type: "boolean" },
      description:
        "Determines the disabled mode of the RangeSlider, if true - disabled.",
    },
    endTabIndex: {
      control: { type: "number" },
      description: "Sets the tabIndex attribute to the end drag handle.",
    },
    id: {
      control: { type: "text" },
      description:
        "Sets the id property of the top div element of the RangeSlider.",
    },
    max: {
      control: { type: "number" },
      description: "The maximum possible value of the RangeSlider.",
    },
    min: {
      control: { type: "number" },
      description: "The minimum possible value of the RangeSlider.",
    },
    name: {
      control: { type: "text" },
      description: "Specifies the name property of the input DOM element.",
    },
    required: {
      control: { type: "boolean" },
      description: "Specifies if null is a valid value for the component.",
    },
    startTabIndex: {
      control: { type: "number" },
      description: "Sets the tabIndex attribute to the start drag handle.",
    },
    step: {
      control: { type: "number" },
      description: "The step by which the value is increment/decrement.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the RangeSlider.",
    },
    valid: {
      control: { type: "boolean" },
      description: "Overrides the validity state of the component.",
    },
    validationMessage: {
      control: { type: "text" },
      description: "Controls the form error message of the component.",
    },
    validityStyles: {
      control: { type: "boolean" },
      description:
        "If set to false, no visual representation of the invalid state of the component will be applied.",
    },
    value: {
      control: { type: "object" },
      description: "The flexible values of type Range - start and end.",
    },
    vertical: {
      control: { type: "boolean" },
      description:
        "The RangeSlider orientation if true - vertical, else - horizontal.",
    },
  },
} as Meta;

export const Default = (args: RangeSliderProps): JSX.Element => (
  <RangeSlider {...args}>
    {[0, 25, 50, 75, 100].map((perc, i) => (
      <SliderLabel key={i} position={perc}>
        {perc.toString()}
      </SliderLabel>
    ))}
  </RangeSlider>
);

Default.args = {
  dataTestId: "range-slider-data-testid",
  defaultValue: { start: 25, end: 75 },
  step: 1,
  min: 0,
  max: 100,
  disabled: false,
  id: "data-test-id",
};