import React, { useState } from "react";
import { Meta } from "@storybook/react";
import RadioGroup from "./RadioGroup";
import { RadioGroupProps } from "./RadioGroupProps";
import { RadioGroupChangeEvent } from "@progress/kendo-react-inputs";

export default {
  title: "Design System/Inputs/RadioGroup",
  component: RadioGroup,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The RadioGroup component allows the user to select one option from a group of choices. \n\n```javascript\nimport { RadioGroup } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    ariaDescribedBy: {
      control: { type: "text" },
      description:
        "Identifies the element(s) which will describe the component.",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Identifies the element(s) which will label the component.",
    },
    className: {
      control: { type: "text" },
      description: "Specifies a list of CSS classes that will be added.",
    },
    data: {
      control: { type: "object" },
      description: "Specifies the data of the RadioGroup.",
    },
    defaultValue: {
      control: { type: "text" },
      description: "Specifies the default value of the RadioGroup.",
    },
    dir: {
      control: { type: "text" },
      description: "Specifies the text direction.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Specifies if the RadioGroup is disabled.",
    },
    item: {
      control: { type: "object" },
      description: "Specifies the item renderer.",
    },
    labelPlacement: {
      control: { type: "text" },
      description: "Specifies the label placement.",
    },
    layout: {
      control: { type: "select", options: ["horizontal", "vertical"] },
      description: "Specifies the layout of the RadioGroup.",
    },
    name: {
      control: { type: "text" },
      description: "Specifies the name of the RadioGroup.",
    },
    style: {
      control: { type: "object" },
      description: "Specifies additional CSS styles.",
    },
    valid: {
      control: { type: "boolean" },
      description: "Specifies the validity state.",
    },
    value: {
      control: { type: "text" },
      description: "Specifies the value of the RadioGroup.",
    },
  },
} as Meta;

export const Default = (args: RadioGroupProps): JSX.Element => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  const handleChange = (e: RadioGroupChangeEvent) => {
    setSelectedValue(e.value as string);
  };

  return <RadioGroup {...args} value={selectedValue} onChange={handleChange} />;
};

Default.args = {
  dataTestId: "radio-group-data-testid",
  ariaDescribedBy: "descriptionId",
  ariaLabelledBy: "labelId",
  className: "custom-class",
  data: [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
  ],
  defaultValue: "option1",
  dir: "ltr",
  disabled: false,
  labelPlacement: "after",
  layout: "horizontal",
  name: "radioGroupName",
  style: {},
  valid: true,
  value: "option1",
};