import { Meta } from "@storybook/react";
import { CheckboxProps } from "./CheckboxProps";
import Checkbox from "./Checkbox";

export default {
  title: "Design System/Inputs/Checkbox",
  component: Checkbox,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Checkbox lets the user toggle between checked, unchecked and the optional indeterminate states. \n\n```javascript\nimport { Checkbox } 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: "Aria described by attribute",
    },
    ariaLabelledBy: {
      control: { type: "text" },
      description: "Aria labelled by attribute",
    },
    checked: {
      control: { type: "boolean" },
      description: "Checked state for the checkbox",
    },
    className: {
      control: { type: "text" },
      description: "Class name for the checkbox",
    },
    defaultChecked: {
      control: { type: "boolean" },
      description: "Default checked state for the checkbox",
    },
    dir: {
      control: { type: "select", options: ["ltr", "rtl", "auto"] },
      description: "Direction for the checkbox",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disabled state for the checkbox",
    },
    id: {
      control: { type: "text" },
      description: "ID for the checkbox",
    },
    label: {
      control: { type: "text" },
      description:
        "Label for the checkbox Sets the className of the label element of the Checkbox.",
    },
    labelClassName: {
      control: { type: "text" },
      description: "Sets the className of the label element of the Checkbox.",
    },
    labelOptional: {
      control: { type: "boolean" },
      description: "Label optional state for the checkbox",
    },
    labelPlacement: {
      control: { type: "select", options: ["after", "before"] },
      description: "Label placement for the checkbox",
    },
    name: {
      control: { type: "text" },
      description: "Name for the checkbox",
    },
    required: {
      control: { type: "boolean" },
      description: "Required state for the checkbox",
    },
    rounded: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Rounded corners for the checkbox",
    },
    size: {
      control: {
        type: "select",
        options: ["null", "small", "medium", "large"],
      },
      description: "Size for the checkbox",
    },
    tabIndex: {
      control: { type: "number" },
      description: "Tab index for the checkbox",
    },
    valid: {
      control: { type: "boolean" },
      description: "Valid state for the checkbox",
    },
    validationMessage: {
      control: { type: "text" },
      description: "Validation message for the checkbox",
    },
    validityStyles: {
      control: { type: "boolean" },
      description: "Validity styles for the checkbox",
    },
    value: {
      control: {
        type: "select",
        options: ["null", "string", "number", "bool"],
      },
      description: "Value for the checkbox",
    },
    onBlur: {
      action: "blurred",
      description:
        "The event handler that will be fired when Checkbox is blurred.",
    },

    onChange: {
      action: "changed",
      description:
        "The event handler that will be fired when the user edits the value.",
    },

    onFocus: {
      action: "focused",
      description:
        "The event handler that will be fired when Checkbox is focused.",
    },
  },
} as Meta;

export const Default = (args: CheckboxProps): JSX.Element => (
  <Checkbox {...args} />
);

Default.args = {
  dataTestId: "checkbox-data-testid",
  defaultChecked: true,
  label: "Checkbox",
};