import React from "react";
import { Meta } from "@storybook/react";
import { HintProps } from "./HintProps";
import Hint from "./Hint";
import { Label } from "@progress/kendo-react-labels";
import FormElement from "../../Form/FormElement/FormElement";
import { Input, InputChangeEvent } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Labels/Hint",
  component: Hint,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Hint component enables you to display a hint message to React components. \n\n```javascript\nimport { Hint } 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: "Sets the hint text.",
    },
    className: {
      control: { type: "text" },
      description: "Sets a class of the Hint DOM element.",
    },
    direction: {
      control: { type: "select", options: ["end", "start"] },
      description: "Specifies the alignment of the Hint text.",
    },
    editorDisabled: {
      control: { type: "boolean" },
      description: "Specifies if the editor is disabled.",
    },
    id: {
      control: { type: "text" },
      description:
        "Represents the id of the Hint element. The value should be set to the editor ariaDescribedBy property.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the Hint.",
    },
  },
} as Meta;

export const Default = (args: HintProps): JSX.Element => {
  const [value, setValue] = React.useState<string | undefined>(undefined);
  const editorId = "firstName";
  return (
    <FormElement style={{ maxWidth: 400 }}>
      <Label editorId={editorId}>First Name:&nbsp;</Label>
      <Input
        id={editorId}
        value={value}
        ariaDescribedBy={"firstNameHint"}
        onChange={(e: InputChangeEvent) => setValue(e.value)}
      />
      <Hint id={"firstNameHint"} {...args}>
        {args.children}
      </Hint>
    </FormElement>
  );
};

Default.args = {
  dataTestId: "hint-data-testid",
  direction: "start",
  children: "e.g.: Peter",
};