import { Meta } from "@storybook/react";
import { QRCodeProps } from "./QRCodeProps";
import QRCode from "./QRCode";

export default {
  title: "Design System/Barcodes/QRCode",
  component: QRCode,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact QR Code supports the popular Quick Response codes with a variety of settings. \n\n```javascript\nimport { QRCode } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Defines the data-test-id of the QRCode component.",
    },
    background: {
      control: { type: "text" },
      description: "QRCode background color.",
    },
    border: {
      control: { type: "object" },
      description: "Defines the properties of the border.",
    },
    className: {
      control: { type: "text" },
      description: "Additional class name for the QRCode component.",
    },
    color: {
      control: { type: "text" },
      description: "Defines the color of the QRCode.",
    },
    encoding: {
      control: { type: "object" },
      description: "Defines the encoding of the QRCode.",
    },
    errorCorrection: {
      control: { type: "object" },
      description: "Defines the error correction level of the QRCode.",
    },
    overlay: {
      control: { type: "object" },
      description: "Defines the overlay configuration of the QRCode.",
    },
    padding: {
      control: { type: "number" },
      description: "Defines the padding of the QRCode.",
    },
    renderAs: {
      control: { type: "object" },
      description: "Defines the render mode of the QRCode component.",
    },
    size: {
      control: { type: "text" },
      description: "Defines the size of the QRCode, accepts string or number.",
    },
    style: {
      control: { type: "object" },
      description: "Defines the CSS styles for the QRCode component.",
    },
    value: {
      control: { type: "text" },
      description: "Defines the value of the QRCode, accepts string or number.",
    },
  },
} as Meta;

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

Default.args = {
  dataTestId: "default-qrcode",
  background: "#ffffff",
  border: {
    color: "#000000",
    dashType: "solid",
    width: 1,
  },
  className: "default-qrcode-class",
  color: "#000000",
  encoding: "ISO_8859_1",
  errorCorrection: "L",
  overlay: {
    height: 50,
    imageUrl: "path/to/default/image.png",
    type: "image",
    width: 50,
  },
  padding: 5,
  size: "150px",
  style: {},
  value: "Default Value",
};