import * as React from 'react';
import { useEffect, useRef, useMemo, useCallback } from 'react';
import JqxTreeGrid, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreegrid';

const App = () => {
  const myTreeGrid = useRef<JqxTreeGrid>(null);

  const data = useMemo(() => [
    {
      budget: '1230000',
      children: [
        {
          budget: '423000',
          children: [
            {
              budget: '113000', id: '3', location: 'San Antonio', name: 'Accounting Department'
            },
            {
              budget: '310000',
              children: [
                { budget: '240000', id: '5', location: 'San Antonio', name: 'Banking Office' },
                { budget: '70000', id: '6', location: 'San Antonio', name: 'Bonds Office' }
              ],
              id: '4', location: 'San Antonio', name: 'Investment Department'
            }
          ],
          id: '2', location: 'San Antonio', name: 'Finance Division'
        },
        {
          budget: '600000',
          children: [
            { budget: '300000', id: '8', location: 'Miami', name: 'Manufacturing Department' },
            { budget: '200000', id: '9', location: 'Miami', name: 'Public Relations Department' },
            { budget: '100000', id: '10', location: 'Miami', name: 'Sales Department' }
          ],
          id: '7', location: 'Miami', name: 'Operations Division'
        },
        { budget: '200000', id: '11', location: 'Boston', name: 'Research Division' }
      ],
      id: '1', location: 'Las Vegas', name: 'Corporate Headquarters'
    }
  ], []);

  const source = useMemo(() => ({
    dataFields: [
      { name: 'name', type: 'string' },
      { name: 'budget', type: 'number' },
      { name: 'id', type: 'number' },
      { name: 'children', type: 'array' },
      { name: 'location', type: 'string' }
    ],
    dataType: 'json',
    hierarchy: {
      root: 'children'
    },
    id: 'id',
    localData: data
  }), [data]);

  const dataAdapter = useMemo(() => new jqx.dataAdapter(source), [source]);

  const columns = useMemo(() => [
    { dataField: 'name', text: 'Name', width: 250 },
    { cellsFormat: "c2", dataField: 'budget', text: 'Budget', width: 250 },
    { dataField: 'location', text: 'Location' }
  ], []);

  const ready = useCallback(() => {
    setTimeout(() => {
      myTreeGrid.current?.expandRow(1);
      myTreeGrid.current?.expandRow(2);
    }, 0);
  }, []);

  return (
    <JqxTreeGrid
      theme="material-purple"
      ref={myTreeGrid}
      width="100%"
      source={dataAdapter}
      altRows={true}
      columnsReorder={true}
      columns={columns}
      ready={ready}
    />
  );
};

export default App;