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

export default {
  title: "Design System/Inputs/Slider",
  component: Slider,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Slider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the side arrow buttons. \n\n```javascript\nimport { Slider } 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.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "The accessible label of the component.",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Identifies the element(s) which will label the component.",
    },
    buttons: {
      control: { type: "boolean" },
      description:
        "Renders the arrow side buttons of the Slider if set to true.",
    },
    children: {
      control: { type: "text" },
      description: "Children nodes of the Slider.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional classes to the Slider.",
    },
    defaultValue: {
      control: { type: "number" },
      description: "The default value of the Slider.",
    },
    dir: {
      control: { type: "text" },
      description: "The text direction of the Slider.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Determines whether the Slider is disabled.",
    },
    id: {
      control: { type: "text" },
      description: "Specifies the id of the component.",
    },
    max: {
      control: { type: "number" },
      description: "The maximum value of the Slider.",
    },
    min: {
      control: { type: "number" },
      description: "The minimum value of the Slider.",
    },
    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.",
    },
    step: {
      control: { type: "number" },
      description: "Specifies the step of the value increase and decrease.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the Slider.",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Specifies the tabindex of the Slider.",
    },
    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: "number" },
      description: "The value of the Slider.",
    },
    vertical: {
      control: { type: "boolean" },
      description:
        "If set to true, the orientation of the Slider changes from horizontal to vertical.",
    },
    onChange: {
      control: { type: "action" },
      description: "Event handler for when the Slider value changes.",
    },
  },
} as Meta;

export const Default = (args: SliderProps): JSX.Element => (
  <Slider {...args}>
    <SliderLabel position={1}>1</SliderLabel>
    <SliderLabel position={3}>3</SliderLabel>
    <SliderLabel position={5}>5</SliderLabel>
    <SliderLabel position={7}>7</SliderLabel>
    <SliderLabel position={10}>10</SliderLabel>
  </Slider>
);

Default.args = {
  dataTestId: "slider-data-testid",
  buttons: true,
  step: 1,
  defaultValue: 7,
  min: 1,
  max: 10,
};