import { useLocal } from "@/utils/use-local";
import { FC, MouseEvent } from "react";
import ExcelJS from "exceljs";
import * as FileSaver from "file-saver";

export const ExportExcel: FC<{
  data: any[],
  fileName?: string
}> = ({
  data, fileName = "exported_data.xlsx"
}): JSX.Element => {
  const local = useLocal({
    data: [] as any[]
  });
  local.data = data;
  local.render();
  const getAllKeys = (arr: Array<Record<string, any>>): string[] => {
    const keysSet = new Set<string>();
    
    arr.forEach(obj => {
      Object.keys(obj).forEach(key => keysSet.add(key));
    });
  
    return Array.from(keysSet);
  };
  
  const handleExport = async (e: MouseEvent<HTMLButtonElement>) => {
    try {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet("Sheet 1");
  
      const columns = getAllKeys(local.data);
      worksheet.addRow(columns);
  
      local.data.forEach((row) => {
        const values = columns.map((col) => row[col]);
        worksheet.addRow(values);
      });
  
      const buffer = await workbook.xlsx.writeBuffer();
  
      const blob = new Blob([buffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
  
      FileSaver.saveAs(blob, fileName);
  
      console.log("Data exported");
    } catch (error) {
      console.error("Error exporting data:", error);
    }
  };

  return (
    <div>
      <button onClick={handleExport} style={{background: '#00ffff'}}>Export</button>
    </div>
  );
};