import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React from 'react';
import useEvent from 'react-use-event-hook';
import * as wjcGrid from '@grapecity/wijmo.react.grid';
import * as wjGrid from '@grapecity/wijmo.grid';
import './app.css';
import * as wjcGridXlsx from '@grapecity/wijmo.grid.xlsx'; // 추가 코드
function App() {
    let refGrid = React.createRef();  // 추가 코드
     // 추가 코드
    const style = [
      {
        row: 0,
        col: 0,
        className: ['yellow'],
      },
      ,
      {
        row: 0,
        col: 1,
        className: ['yellow'],
      },
      {
        row: 1,
        col: 2,
        className: ['yellow'],
      },
    ];

    const onInitialized = useEvent((grid) => {
        refGrid.current = grid;
        // create extra header row
        var extraRow = new wjGrid.Row();
        extraRow.allowMerging = true;
        //
        // add extra header row to the grid
        var panel = grid.columnHeaders;
        panel.rows.splice(0, 0, extraRow);
        //
        // populate the extra header row
        for (let colIndex = 1; colIndex <= 2; colIndex++) {
            panel.setCellData(0, colIndex, 'Amounts');
        }
        //
        // merge "Country" and "Active" headers vertically
        ['country', 'active'].forEach(function (binding) {
            let col = grid.getColumn(binding);
            col.allowMerging = true;
            panel.setCellData(0, col.index, col.header);
        });
        
        // 수정코드
        // change the color of header cells using a defined style
        grid.formatItem.addHandler(function (s, e) {
            if (e.panel.cellType == wjGrid.CellType.ColumnHeader) {
                if (style.length) {
                    let row = e.row;
                    let col = e.col;
            
                    style.forEach((x) => {
                        if (x.row === row && x.col === col) {
                            x.className.forEach((name) => {
                                e.cell.style.backgroundColor = name;
                            });
                        }
                    });
                }
            }
        });

        grid.autoGenerateColumns = false;
        grid.itemsSource = getData();
    });
    const getData = () => {
        var countries = 'US,Germany,UK,Japan'.split(',');
        var data = [];
        for (var i = 0; i < 20; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                active: i % 5 != 0,
                downloads: Math.round(Math.random() * 200000),
                sales: Math.random() * 100000,
                expenses: Math.random() * 50000
            });
        }
        return data;
    };

    // 추가 코드
    const saveExcel = async () => {
        wjcGridXlsx.FlexGridXlsxConverter.saveAsync(
            refGrid.current,
            {
                includeColumnHeaders: true,
                includeStyles: true,
            },
            'FlexGrid.xlsx'
        );
    }

    return (<div className="container-fluid">
      <wjcGrid.FlexGrid allowMerging="ColumnHeaders" alternatingRowStep={0} initialized={onInitialized}>
        <wjcGrid.FlexGridColumn binding="country" header="Country" allowMerging={true}/>
        <wjcGrid.FlexGridColumn binding="sales" header="Sales" format="n2"/>
        <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" format="n2"/>
        <wjcGrid.FlexGridColumn binding="active" header="Active" allowMerging={true}/>
      </wjcGrid.FlexGrid>
      <button onClick={saveExcel}>Excel</button>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}가