import { Meta } from "@storybook/react";
import { BarcodeProps } from "./BarcodeProps";
import Barcode from "./Barcode";

export default {
  title: "Design System/Barcodes/Barcode",
  component: Barcode,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Barcode renders a variety of one-dimensional (1D) industry barcodes. \n\n```javascript\nimport { Barcode } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    background: {
      control: { type: "color" },
      description:
        "The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.",
    },
    border: {
      control: { type: "object" },
      description: "The border of the Barcode.",
    },
    checksum: {
      control: { type: "boolean" },
      description:
        "If set to true, the Barcode will display the checksum digit next to the value in the text area.",
    },
    className: {
      control: { type: "text" },
      description: "Sets additional CSS classes to the component.",
    },
    color: {
      control: { type: "color" },
      description:
        "The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.",
    },
    height: {
      control: { type: "number" },
      description: "The height of the Barcode in pixels.",
    },
    padding: {
      control: { type: "object" },
      description:
        "The padding of the Barcode. A numeric value sets all paddings.",
    },
    renderAs: {
      control: { type: "text" },
      description:
        'Sets the preferred rendering engine. The supported values are: "svg" and "canvas".',
    },
    style: {
      control: { type: "object" },
      description: "The styles that are applied to the component.",
    },
    text: {
      control: { type: "object" },
      description: "The Barcode text label configuration.",
    },
    type: {
      control: { type: "text" },
      description: "The symbology (encoding) the Barcode will use.",
    },
    value: {
      control: { type: "text" },
      description: "The value of the Barcode.",
    },
    width: {
      control: { type: "number" },
      description: "The width of the Barcode in pixels.",
    },
  },
} as Meta;

export const Default = (args: BarcodeProps): JSX.Element => (
  <Barcode {...args} />
);
Default.args = {
  dataTestId: "barcode-data-testid",
  type: "Code39",
  value: "12345",
};