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

export default {
  title: "Design System/Labels/FloatingLabel",
  component: FloatingLabel,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The FloatingLabel component enables you to provide a floating label functionality to React components. It supports labelling both form elements (e.g.: input element) and custom focusable elements. It can contain Kendo React Input components such as KendoReact DropDownList and NumericTextBox, or HTML elements like input. \n\n```javascript\nimport { FloatingLabel } 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 FloatingLabel DOM element.",
    },
    dir: {
      control: { type: "text" },
      description: "Specifies the direction of the label.",
    },
    editorDisabled: {
      control: { type: "boolean" },
      description: "Specifies if the editor is disabled.",
    },
    editorId: {
      control: { type: "text" },
      description:
        "Represent the htmlFor property, which will be set to the label element.",
    },
    editorPlaceholder: {
      control: { type: "text" },
      description:
        "Specifies the placeholder of the editor. Used to define if the editor is empty.",
    },
    editorValid: {
      control: { type: "boolean" },
      description:
        "Specifies if the validity of the editor. Used to define the editor is invalid.",
    },
    editorValue: {
      control: { type: "text" },
      description:
        "Specifies the value of the editor. Used to define if the editor is empty.",
    },
    id: {
      control: { type: "text" },
      description:
        "Represents the id of the label element. The value should be also set to the editor's ariaLabelledBy property. Can be used when the editor is not containing native form element.",
    },
    label: {
      control: { type: "text" },
      description: "Adds a floating label that describes the editor.",
    },
    labelClassName: {
      control: { type: "text" },
      description: "Sets the className of the label DOM element.",
    },
    optional: {
      control: { type: "boolean" },
      description: "If enabled, marks the label as optional.",
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the FloatingLabel.",
    },
  },
} as Meta;

export const Default = (args: FloatingLabelProps): JSX.Element => {
  const [value, setValue] = React.useState<string | undefined>(undefined);
  const editorId = "firstName";
  return (
    <FloatingLabel
      label={"First Name:"}
      editorId={editorId}
      editorValue={value}
      {...args}
    >
      <Input
        id={editorId}
        value={value}
        onChange={(e: InputChangeEvent) => setValue(e.value)}
      />
    </FloatingLabel>
  );
};

Default.args = {
  dataTestId: "floatingLabel-data-testid",
  children: "Your content here",
  label: "Your label",
};