import {
    Grid,
    GridColumn,
    GridColumnProps,
  } from "@progress/kendo-react-grid";
  import { ColumnMenu } from "./column-menu";
import { useCallback, useState } from "react";
import { ColumnMenuContext } from "./column-menu-context";

  const DataGrid = (props: IProps) => {
    const columns = props.columns.map((item: any) => ({
        ...item,
        id: item.title,
        columnMenu: ColumnMenu,
      }));

    const filterColOrder = columns;

    const colStateCache = sessionStorage.getItem(props.gridID + "-colCache");
    const filterColCache = sessionStorage.getItem(props.gridID + "-filterColCache");

    const [columnsState, setColumnsState] = useState(
        colStateCache ? JSON.parse(colStateCache) : columns,
    );

    const [filterColumnsState, setFilterColumnsState] = useState(
        filterColCache ? JSON.parse(filterColCache) : columns,
    );

    const onColumnsChange = useCallback((cols: GridColumnProps[]) => {
        setColumnsState(cols);

        sessionStorage.setItem(
          props.gridID + "-colCache",
          JSON.stringify(cols),
        );
      }, []);

      const onColumnsReorder = (gridProps) => {

        // Reorder the columns based on their order index into a new list
        const reorderedColList = Array<any>(gridProps.columns?.length);
        gridProps.columns?.forEach((column) => {
          const col = {
            field: column.field,
            orderIndex: column.orderIndex,
          };
          reorderedColList[column.orderIndex] = col;
        });
    
        // Create a new column list with the updated order indexes
        const newColList = [] as GridColumnProps[];
        reorderedColList.forEach((column) => {
          const item = filterColumnsState?.find((i) => i.field === column.field);
          if (item !== null && item !== undefined) {
            item.orderIndex = column.orderedIndex;
            newColList.push(item);
          }
        });
    
        // create a list of indexes for the columns in the filter list that need to be reordered
        const sortIdx = [];
        newColList.forEach((column) => {
          const index = filterColOrder?.findIndex((i) => i.field === column.field);
          sortIdx.push(index);
        });
        sortIdx.sort();
    
        // Reorder the filter column menu order based on the indexes from the previous list
        for (let i = 0; i < sortIdx.length; i++) {
          const col = newColList[i];
          if (col.field !== filterColOrder[sortIdx[i]].field) {
            const idx = filterColOrder?.findIndex((i) => i.field === col.field);
            const temp = filterColOrder[sortIdx[i]];
            filterColOrder[sortIdx[i]] = filterColOrder[idx];
            filterColOrder[idx] = temp;
          }
        }

        setFilterColumnsState(filterColOrder);
    
        sessionStorage.setItem(
          props.gridID + "-colCache",
          JSON.stringify(newColList as GridColumnProps[]),
        );
        sessionStorage.setItem(
          props.gridID + "-filterColCache",
          JSON.stringify(filterColOrder as GridColumnProps[]),
        );
      }

      return (
        <ColumnMenuContext.Provider value={{ onColumnsChange, columnsState, columns: filterColumnsState }}>
            <Grid
                id={props.guidField && props.guidField}
                data={props.data}
                reorderable={true}
                onColumnReorder={onColumnsReorder}
            >
              {columnsState.map((item, index) => (
                <GridColumn
                  id={`rowId_${index}`}
                  key={`${item.field}_${index}`}
                  field={item.field}
                  title={item.title}
                  editable={false}
                  columnMenu={ColumnMenu}
                  width={item.width ?? "auto"}
                />
              ))}
            </Grid>
        </ColumnMenuContext.Provider>
      )
  }

  interface IProps {
    guidField?: string;
    className?: string;
    columns: {
      title: string;
      field: string;
      width?: string;
      editable?: boolean;
    }[];
    height?: number;
    gridID?: string;
    data: any;
    sortable?: boolean | any;
    notPageable?: boolean;
    dataItemKey?: string;
    dataDetailsField?: string;
    toolbar?: boolean;
    onDataSelectionChanged?: (items: any) => void;
    onExpandedHandler?: (id: string) => void;
  }
  
  export default DataGrid;