import React from "react";
import { Meta } from "@storybook/react";
import ExcelExport from "./ExcelExport";
import { ExcelExportProps } from "./ExcelExportProps";
import { ExcelExportColumn } from "@progress/kendo-react-excel-export";
import { process } from "@progress/kendo-data-query";
import products from "./mockData/products.json";
import Button from "@/components/Buttons/Button/Button";

interface KendoExcelExportInstance {
  save: () => void;
}

const aggregates = [
  {
    field: "UnitPrice",
    aggregate: "sum",
  },
];

const group = [
  {
    field: "Discontinued",
    aggregates: aggregates,
  },
];

const data = process(products, {
  group: [
    {
      field: "Discontinued",
      aggregates: [
        {
          field: "UnitPrice",
          aggregate: "sum",
        },
      ],
    },
  ],
}).data;

const CustomGroupFooter = (props: {
  aggregates: { UnitPrice: { sum: number } };
}) => {
  return `Sum: ${props.aggregates.UnitPrice.sum.toFixed(2)}`;
};

export default {
  title: "Design System/ExcelExport",
  component: ExcelExport,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Excel Export component allows you to export data to an Excel file. \n\n```javascript\nimport { ExcelExport } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    collapsible: {
      control: { type: "boolean" },
      description:
        "Enables or disables collapsible (grouped) rows in the exported file.",
    },
    columns: {
      control: { type: "object" },
      description: "The columns to be exported.",
    },
    creator: {
      control: { type: "text" },
      description: "The creator of the Excel file.",
    },
    data: {
      control: { type: "object" },
      description: "The data to be exported.",
    },
    date: {
      control: { type: "date" },
      description: "The creation date of the Excel file.",
    },
    dir: {
      control: { type: "text" },
      description: "The direction of the text.",
    },
    fileName: {
      control: { type: "text" },
      description: "The name of the Excel file.",
    },
    filterable: {
      control: { type: "boolean" },
      description: "Enables or disables filtering.",
    },
    forceProxy: {
      control: { type: "boolean" },
      description: "Forces the use of a proxy.",
    },
    group: {
      control: { type: "object" },
      description: "The group configuration.",
    },
    headerPaddingCellOptions: {
      control: { type: "object" },
      description: "The options for the header padding cell.",
    },
    hierarchy: {
      control: { type: "boolean" },
      description: "Enables or disables hierarchy.",
    },
    paddingCellOptions: {
      control: { type: "object" },
      description: "The options for the padding cell.",
    },
    proxyURL: {
      control: { type: "text" },
      description: "The URL of the proxy.",
    },
    onExportComplete: {
      action: "onExportComplete",
      description: "Event triggered when the export is complete.",
    },
  },
} as Meta;

export const Default = (args: ExcelExportProps): JSX.Element => {
  const _exporter = React.createRef<KendoExcelExportInstance>();
  const excelExport = () => {
    if (_exporter.current) {
      _exporter.current.save();
    }
  };

  return (
    <div>
      <Button onClick={excelExport}>Export to Excel</Button>

      <ExcelExport
        data={data}
        group={group}
        collapsible={true}
        ref={_exporter}
        {...args}
      >
        <ExcelExportColumn field="ProductID" title="Product ID" width={200} />
        <ExcelExportColumn field="ProductName" title="Product Name" />
        <ExcelExportColumn
          field="UnitPrice"
          title="Unit Price"
          groupFooter={CustomGroupFooter}
          cellOptions={{
            format: "$#,##0.00",
          }}
          groupFooterCellOptions={{
            textAlign: "right",
          }}
          footerCellOptions={{
            wrap: true,
            textAlign: "center",
          }}
        />
      </ExcelExport>
    </div>
  );
};

Default.args = {
  dataTestId: "excel-export-data-testid",
  dir: "ltr",
  fileName: "ExcelFile.xlsx",
};