import { Meta } from "@storybook/react";
import TextBox from "./TextBox";
import { TextBoxProps } from "./TextBoxProps";

export default {
  title: "Design System/Inputs/TextBox",
  component: TextBox,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact TextBox component provides options for creating composite inputs that you can integrate within forms or use as standalone items. \n\n```javascript\nimport { TextBox } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    fillMode: {
      control: {
        type: "select",
        options: ["null", "flat", "outline", "solid"],
      },
      description: "Configures the fillMode of the TextBox.",
    },
    prefix: {
      control: { type: "text" },
      description: "Sets a custom prefix to the TextBox component.",
    },
    rounded: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "full", "large"],
      },
      description: "Configures the roundness of the TextBox.",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Configures the size of the TextBox.",
    },
    suffix: {
      control: { type: "text" },
      description: "Sets a custom suffix to the TextBox component.",
    },
    valid: {
      control: { type: "boolean" },
      description: "Indicates if the component is in valid state.",
    },
    onChange: {
      control: { type: "action" },
      description:
        "The onChange callback of the input element inside the TextBox.",
    },
  },
} as Meta;

export const Default = (args: TextBoxProps): JSX.Element => (
  <TextBox {...args} />
);

Default.args = {
  dataTestId: "textbox-data-testid",
  fillMode: "solid",
  rounded: "medium",
  size: "medium",
  valid: true,
};