// react
import { useExcelExporter } from "tango-excel-cw";
import { MaterialButton } from "tango-ui-cw";
import Tree from "@/assets/yourimg.jpg";
import DemoExcel from "@/assets/youremptyexcel.xlsx";

function Demo() {
  const { exportExcel } = useExcelExporter();
  const config = {
    data: {
      id: 1,
      treenumber: "110C1892",
      treekind: "poplar",
    },
    fileName: "export.xlsx",
    template: DemoExcel,
    cellMap: {
      A3: "id",
      B3: "treenumber",
      C3: "treekind",
    },
    startRow: 2,
    image: {
      url: Tree,
      range: {
        tl: { col: 6, row: 2 }, 
        br: { col: 7, row: 3 },
      },
    },
    onBeforeExport: () => console.log("prepare to export..."),
    onSuccess: () => console.log("export successful!"),
    onError: (err) => console.error("export failure", err),
  };

  function ExportExcelDemo() {
    exportExcel(config);
  }

  return (
    <>
      <MaterialButton onClick={ExportExcelDemo}>Export to Excel</MaterialButton>
    </>
  );
}

export default Demo;

  // traverse the form data finalDatas requested
  const dataRows = finalDatas.map(item => ({
    date: item.time,
    location: item.location,
    treekind: item.treekind,
    treenumber: item.treenumber,
    abnormal: item.abnormal,
    staff: item.staff,
    range: rangeStr          // table export time
  }));

  // configure parameters for exporting to Excel
  const config = {
    data: dataRows,          // data sources
    fileName: export.xlsx,  // export file name
    template: EmptyTable,    // empty demo excel
    startRow: 3,             // the starting row for data insertion
    cellMap: {               // cell map configuration
      A: "date",
      B: "location",
      C: "treekind",
      D: "treenumber",
      E: "abnormal",
      F: "staff"
    },
    cellMapStatic: {         // accurate mapping of static data (not affected by startRow)
      F1: "range"            // insert 'table export time' into the specified position
    },
  };