import { Meta } from "@storybook/react";
import { LabelProps } from "./LabelProps";
import Label from "./Label";
import { useState } from "react";
import { Input, InputChangeEvent } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Labels/Label",
  component: Label,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Label component enables you to provide a 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 { Switch } 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: "Metin, etiket elemanı içinde oluşturulacak.",
    },
    className: {
      control: { type: "text" },
      description: "Etiket DOM elemanının sınıfını belirtir.",
    },
    editorDisabled: {
      control: { type: "boolean" },
      description: "Editörün devre dışı olup olmadığını belirtir.",
    },
    editorId: {
      control: { type: "text" },
      description: "Editörün kimliği. htmlFor özelliğini temsil eder.",
    },
    editorRef: {
      control: { type: "object" },
      description: "Editör için isteğe bağlı bir React ref.",
    },
    editorValid: {
      control: { type: "boolean" },
      description: "Editörün geçerliliğini belirtir.",
    },
    id: {
      control: { type: "text" },
      description: "Etiket elemanının kimliği.",
    },
    optional: {
      control: { type: "boolean" },
      description: "Etiketi isteğe bağlı olarak işaretler.",
    },
    style: {
      control: { type: "object" },
      description: "Etikete uygulanacak stiller.",
    },
  },
} as Meta;

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

Default.args = {
  dataTestId: "label-data-testid",
  children: "Default Label",
  className: "custom-class",
  editorDisabled: false,
  editorId: "editor-id",
  editorRef: null,
  editorValid: true,
  id: "label-id",
  optional: false,
  style: {},
};