import React from "react";
import { Meta } from "@storybook/react";
import RadioButton from "./RadioButton";
import { RadioButtonChangeEvent, RadioButtonProps } from "./RadioButtonProps";

export default {
  title: "Design System/Inputs/RadioButton",
  component: RadioButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact RadioButton lets the user choose only one from multiple options. It is designed to replace the <input type="radio"> HTML5 tag and provides KendoReact specific styling. \n\n```javascript\nimport { RadioButton } 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, similar to HTML aria-describedby attribute.",
    },
    checked: {
      control: { type: "boolean" },
      description: "Specifies if the Radio button is checked.",
    },
    children: {
      control: { type: "text" },
      description: "Sets the children of the Radio button.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the Radio button.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Specifies if the Radio button is disabled.",
    },
    id: {
      control: { type: "text" },
      description: "Sets the id of the Radio button.",
    },
    index: {
      control: { type: "number" },
      description: "Specifies the current index of the Radio button.",
    },
    label: {
      control: { type: "text" },
      description: "Sets the label of the Radio button.",
    },
    labelPlacement: {
      control: { type: "select", options: ["before", "after"] },
      description:
        "Sets the label position of the Radio button. Accepts two options: before or after. Defaults to after.",
    },
    name: {
      control: { type: "text" },
      description: "Sets the name property of the Radio button.",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Configures the size of the RadioButton.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the Radio button.",
    },
    tabIndex: {
      control: { type: "number" },
      description:
        "Sets the tabIndex property of the Radio button. Defaults to 0.",
    },
    valid: {
      control: { type: "boolean" },
      description:
        "Overrides the validity state of the component. If valid is set, the required property will be ignored.",
    },
    value: {
      control: { type: "text" },
      description: "Sets the value to be submitted.",
    },
  },
} as Meta;

export const Default = (args: RadioButtonProps): JSX.Element => {
  const [selectedValue, setSelectedValue] = React.useState("first");

  const handleChange = React.useCallback(
    (e: RadioButtonChangeEvent) => {
      setSelectedValue(e.value);
    },
    [setSelectedValue]
  );

  return (
    <div>
      <RadioButton
        name="group1"
        value="first"
        checked={selectedValue === "first"}
        label="First"
        onChange={handleChange}
        disabled={args.disabled}
      />
      <br />
      <RadioButton
        name="group1"
        value="second"
        checked={selectedValue === "second"}
        label="Second"
        onChange={handleChange}
        disabled={args.disabled}
      />
    </div>
  );
};

Default.args = {
  dataTestId: "radio-button-data-testid",
  ariaDescribedBy: "descriptionId",
  checked: false,
  className: "custom-class",
  disabled: false,
  id: "radioButtonId",
  index: 0,
  label: "Option",
  labelPlacement: "after",
  name: "radioGroupName",
  size: "medium",
  tabIndex: 0,
  valid: true,
  value: "optionValue",
};