// @ts-nocheck
"use client";

import React, { useState } from "react";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-slicers";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-reportsheet-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import "@mescius/spread-sheets-resources-ko";
import "@mescius/spread-sheets-formula-panel";
import "@mescius/spread-sheets-designer-resources-ko";
import '@mescius/spread-sheets-datacharts-addon';
import * as GC from "@mescius/spread-sheets";
import { Designer } from "@mescius/spread-sheets-designer-react";
import {
  addSheet,
  clearSheet,
  createSampleReportForm,  
  removeSheet,
  setSampleReportData,
  exportJSON,handleFileImport
} from "@/lib/spread-js/fns";
import { Button } from "@/components/ui/button";

// SpreadJS 라이선싱
// var SpreadJSKey = "xxx";          // 라이선스 키 입력
// GC.Spread.Sheets.LicenseKey = SpreadJSKey;
GC.Spread.Common.CultureManager.culture("ko-kr");
GC.Spread.Sheets.LicenseKey = process.env.NEXT_PUBLIC_SPREAD_LICENSE
GC.Spread.Sheets.Designer.LicenseKey = process.env.NEXT_PUBLIC_DESIGNER_LICENSE

export default function SpreadSheet() {
  const [spread, setSpread] = useState(null);
  
  function initSpread(spread) {
    setSpread(spread);
    //init Status Bar
    var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
      document.getElementById("statusBar")
    );
    statusBar.bind(spread);
  }    

  return (
    <div className="relative h-full overflow-hidden">
      <div className="sample-container">
        <div className="w-[calc(100%-280px)] h-full overflow-hidden float-left">        
          <Designer
            styleInfo={{ height: "100%" }}
            designerInitialized={async (designer: any) => {
              initSpread(designer.getWorkbook());
              designer.refresh();
            }}
            spreadOptions={{ allowDragHeaderToMove: 3 }}
          />
        </div>
        <div id="statusBar"></div>
      </div>
      <div className="float-right w-[280px] p-[12px] h-full box-border bg-[#fbfbfb]">
        <div className="p-[5px] mt-[10px]">
       
          <div className="flex flex-col gap-2">
            <Button onClick={() => addSheet(spread)}>Add Sheet</Button>
            <Button onClick={() => removeSheet(spread)}>Remove Sheet</Button>
            <Button onClick={() => clearSheet(spread)}>Clear Sheet</Button>
            <Button onClick={() => createSampleReportForm(spread)}>
              Create Report Form
            </Button>
            <Button onClick={() => setSampleReportData(spread)}>
              Set Report Data
            </Button>
            <Button onClick={() => exportJSON(spread)}>
              Export JSON
            </Button>
            <Button onClick={() => handleFileImport(spread)}>
              Import JSON
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}