import { Meta } from "@storybook/react";
import { InputProps } from "./InputProps";
import Input from "./Input";
import React from "react";
import { InputChangeEvent } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Inputs/Input",
  component: Input,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Input component offers a highly customizable interface for the user to submit a value on a single line. Its features cover everything from setting a character counter to form validation. \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.",
    },
    id: {
      control: { type: "text" },
      description: "Prop desc",
    },
    ariaDescribedBy: {
      control: { type: "text" },
      description:
        "Identifies the element(s) which will describe the component.",
    },
    ariaLabel: {
      control: { type: "text" },
      description: "Defines a string value that labels an interactive element.",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Identifies the element(s) which will label the component.",
    },
    defaultValue: {
      control: { type: "text" },
      description: "Represents the Input default value.",
    },
    label: {
      control: { type: "text" },
      description: "Renders a floating label for the Input component.",
    },
    labelClassName: {
      control: { type: "text" },
      description: "Sets a className for the floating label.",
    },
    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: "text" },
      description: "Represents the Input value.",
    },
  },
} as Meta;

export const Default = (args: InputProps): JSX.Element => {
  const [value, setValue] = React.useState(args.value);

  const handleChange = (e: InputChangeEvent) => {
    setValue(e.value);
  };

  return <Input {...args} value={value} onChange={handleChange} />;
};

Default.args = {
  dataTestId: "card-data-testid",
  ariaDescribedBy: "",
  ariaLabel: "",
  ariaLabelledBy: "",
  defaultValue: "",
  label: "Message",
  labelClassName: "",
  valid: true,
  validationMessage: "",
  validityStyles: true,
  value: "",
};