import '@glideapps/glide-data-grid/dist/index.css';
import React from 'react';

import { MantineBetterMenusProvider } from '../MantineBetterMenu';
import { type GridlerProps, Provider } from './components/Store';
import { GridlerDataGrid } from './GridlerDataGrid';

export const Gridler = (props: GridlerProps) => {
  return (
    <MantineBetterMenusProvider>
      <Provider
        {...props}
        persist={{
          name: `Gridler_${props.uniqueid}`,
          partialize: (s) => ({ colOrder: s.colOrder, colSize: s.colSize }),

          version: 1,
        }}
      >
        <GridlerDataGrid />
        {props.children}
      </Provider>
    </MantineBetterMenusProvider>
  );
};