import React from "react";
import { Meta } from "@storybook/react";
import { ErrorProps } from "./ErrorProps";
import Error from "./Error";
import { Label } from "@progress/kendo-react-labels";
import FormElement from "../../Form/FormElement/FormElement";
import { Input } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Labels/Error",
  component: Error,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Error component enables you to display an error message to React components. \n\n```javascript\nimport { Error } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    children: {
      control: { type: "text" },
      description: "Determines the children nodes.",
    },
    className: {
      control: { type: "text" },
      description: "Sets a class of the Error DOM element.",
    },
    direction: {
      control: { type: "select", options: ["end", "start"] },
      description: "Specifies the alignment of the Error text.",
    },
    id: {
      control: { type: "text" },
      description:
        "Represents the id of the Error element. The value should be also set to the editor's ariaDescribedBy property.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the Error.",
    },
  },
} as Meta;

export const Default = (args: ErrorProps): JSX.Element => {
  const [value, setValue] = React.useState();
  const editorId = "firstName";
  return (
    <FormElement style={{ maxWidth: 400 }}>
      <Label editorId={editorId}>First Name:&nbsp;</Label>
      <Input
        id={editorId}
        value={value}
        ariaDescribedBy={"firstNameError"}
        onChange={(e: any) => setValue(e.value)}
      />
      {!value && (
        <Error id={"firstNameError"} {...args}>
          {args.children}
        </Error>
      )}
    </FormElement>
  );
};

Default.args = {
  dataTestId: "error-data-testid",
  children: "This field is required.",
  className: "",
  direction: "end",
  id: "firstNameError",
  style: {},
};