import React from "react";
import { Meta } from "@storybook/react";
import { PDFExportProps } from "../PDFExport/PDFExportProps";
import {
  Grid,
  GridColumn as Column,
  GridToolbar,
} from "@progress/kendo-react-grid";
import { sampleProducts } from "./mockData/sampleProducts";
import GridPDFExport from "./GridPDFExport";
import { GridPDFExport as KendoGridPDFExport } from "@progress/kendo-react-pdf";

export default {
  title: "Design System/Pdf Processing/GridPDFExport",
  component: GridPDFExport,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact PDF Generator enables you to export a selection of or the entire content of a web page to a PDF file. \n\n```javascript\nimport { GridPDFExport } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    author: {
      control: { type: "text" },
      description: "The author (metadata) of the PDF document.",
    },
    avoidLinks: {
      control: { type: "boolean" },
      description:
        "A flag that indicates whether to produce actual hyperlinks in the exported PDF file.",
    },
    creator: {
      control: { type: "text" },
      description: "The creator of the PDF document.",
    },
    date: {
      control: { type: "date" },
      description: "The date of the PDF document.",
    },
    fileName: {
      control: { type: "text" },
      description: "The file name of the PDF document.",
    },
    forcePageBreak: {
      control: { type: "text" },
      description: "The CSS selector for page breaks.",
    },
    forceProxy: {
      control: { type: "boolean" },
      description: "Forces the use of a proxy.",
    },
    imageResolution: {
      control: { type: "number" },
      description: "The resolution for images.",
    },
    keepTogether: {
      control: { type: "text" },
      description:
        "The CSS selector for elements that should be kept together.",
    },
    keywords: {
      control: { type: "text" },
      description: "The keywords of the PDF document.",
    },
    landscape: {
      control: { type: "boolean" },
      description: "The page orientation.",
    },
    margin: {
      control: { type: "object" },
      description: "The page margins.",
    },
    pageTemplate: {
      control: { type: "object" },
      description: "The page template.",
    },
    paperSize: {
      control: { type: "object" },
      description: "The paper size.",
    },
    producer: {
      control: { type: "text" },
      description: "The producer of the PDF document.",
    },
    proxyData: {
      control: { type: "object" },
      description: "The data for the proxy.",
    },
    proxyTarget: {
      control: { type: "text" },
      description: "The target for the proxy.",
    },
    proxyURL: {
      control: { type: "text" },
      description: "The URL for the proxy.",
    },
    repeatHeaders: {
      control: { type: "boolean" },
      description: "Indicates if the headers should be repeated.",
    },
    scale: {
      control: { type: "number" },
      description: "The scale factor.",
    },
    subject: {
      control: { type: "text" },
      description: "The subject of the PDF document.",
    },
    title: {
      control: { type: "text" },
      description: "The title of the PDF document.",
    },
  },
} as Meta;

export const Default = (args: PDFExportProps): JSX.Element => {
  let gridPDFExport = React.useRef<KendoGridPDFExport>(null);
  const exportPDF = () => {
    if (gridPDFExport.current) {
      gridPDFExport.current.save();
    } else {
      console.error("gridPDFExport.current is undefined");
    }
  };

  const grid = (
    <Grid data={sampleProducts}>
      <GridToolbar>
        <button
          title="Export PDF"
          className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"
          onClick={exportPDF}
        >
          Export PDF
        </button>
      </GridToolbar>
      <Column field="ProductID" title="ID" width="50px" />
      <Column field="ProductName" title="Name" width="300px" />
      <Column field="Category.CategoryName" title="Category" />
      <Column field="UnitPrice" title="Price" />
      <Column field="UnitsInStock" title="In stock" />
      <Column field="Discontinued" title="Discontinued" />
    </Grid>
  );

  return (
    <>
      {grid}
      <GridPDFExport ref={gridPDFExport} {...args}>
        {grid}
      </GridPDFExport>
    </>
  );
};

Default.args = {
  dataTestId: "grid-pdf-export-data-testid",
  author: "John Doe",
  avoidLinks: true,
  creator: "Creator",
  date: new Date(),
  fileName: "document.pdf",
  forcePageBreak: ".page-break",
  forceProxy: false,
  imageResolution: 300,
  keepTogether: ".keep-together",
  keywords: "pdf,export",
  landscape: false,
  margin: { top: 10, left: 10, bottom: 10, right: 10 },
  pageTemplate: null,
  paperSize: "A4",
  producer: "Producer",
  proxyData: {},
  proxyTarget: "",
  proxyURL: "",
  repeatHeaders: true,
  scale: 1,
  subject: "Subject",
  title: "Title",
};