import React, { useRef } from 'react';
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';
import 'handsontable-context-menu/dist/handsontable-contextMenu.min.css';
import { HotTable } from '@handsontable/react';

const App = () => {
  const hotTableRef = useRef(null);

  const data = [
    ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13],
  ];

  const contextMenu = {
    items: {
      insertYear: {
        name: '插入年份',
        callback: () => {
          const currentYear = new Date().getFullYear();
          const newRow = [currentYear, '', '', '', ''];
          const hot = hotTableRef.current.hotInstance;

          hot.alter('insert_row', hot.countRows());
          hot.setDataAtRow(hot.countRows() - 1, newRow);
        },
      },
    },
  };

  return (
    <div>
      <HotTable
        ref={hotTableRef}
        data={data}
        colHeaders={true}
        rowHeaders={true}
        contextMenu={contextMenu}
        licenseKey="non-commercial-and-evaluation"
      />
    </div>
  );
};

export default App;