import { process } from "@progress/kendo-data-query";
import {
  GridColumn as Column,
  Grid,
  GridColumnMenuWrapper,
  GridToolbar,
} from "@progress/kendo-react-grid";
import { Input } from "@progress/kendo-react-inputs";
import { Component, useEffect, useState } from "react";
import { getUserDetailsFromLocalStorage } from "../../service/app-services/reusableService";
import "../../styles/GPGrid.css";
import { DropDownCell } from "./DropDownCell";
import { CellRender, RowRender } from "./cellRender";
import columns from "./columns";
import { ColumnMenuCheckboxFilter, CustomColumnMenu } from "./customColumnMenu";
import { filterIcon } from "@progress/kendo-svg-icons";



// Setting grid edit configuration value
const EDIT_FIELD = "inEdit";

// set initial pagination and sorting state (By default 'gpid' column is sorted in ascending order)
let initialState = {
  sort: [
    {
      field: "gpid",
      dir: "asc",
    },
  ],
  skip: 0,
  take: 10,
};

const matchStatusOptions = [
  {},
];

// extending component definition to handle custom column cell definitions, displaying long column values with ellipses and tooltips
class ColumnCell extends Component {
  render() {
    let field = this.props.field;
    return (
      <td title={this.props.dataItem.ProductName}>
        <a className="k-link" onClick={this.props.onClick}>
          <span title={this.props.dataItem[field]}>
            {this.props.dataItem[field]}
          </span>
          {this.props.children}
        </a>
      </td>
    );
  }
}

// extending component definition to handle custom column header definitions, displaying long column values with ellipses and tooltips
class ColumnHeader extends Component {
  render() {
    let title = this.props.title;
    this.props.columnMenuWrapperProps.filterable = false;
    

    return (
      <>
        <a className="k-link" onClick={this.props.onClick}>
          <span title={title}>{this.props.title}</span>
          {this.props.children}
        </a>

        {/* https://www.telerik.com/forums/column-menu-doesn-t-work-in-custom-headers#5446983 
        
            Add custom column header menu icon manually
        */}
        <GridColumnMenuWrapper
          {...this.props.columnMenuWrapperProps}
      
        ></GridColumnMenuWrapper>
      </>
    );
  }
}


export default function GPGrid({

}) {
...

  return (
    <>
      {/* Hide columns from the column menu and enable the Grid to update the column menu accordingly - https://www.telerik.com/kendo-react-ui/components/grid/interactivity/column-menu/#toc-custom-components */}

      {
        <Grid         
          total={total}
          onDataStateChange={dataStateChange}
          pageable={{
            buttonCount: 5,
            pageSizes: [10, 15, 30],
            pageSizeValue: pageSizeValue,
          }}
          dataItemKey={"key"}
          rowHeight={50}
          onItemChange={itemChange}
          cellRender={customCellRender}
          rowRender={customRowRender}
          editField={EDIT_FIELD}
          sortable={true}
          resizable={true}
          columnMenuIcon={filterIcon}
          data={gridData}
          {...dataState}
          onRowClick={rowClick}         
          reorderable={true}         
        >
       
          {stateColumns.map((column, idx) => {
            return (
              column.show && (
              
                <Column
                  key={idx}
                  field={column.field}
                  title={column.title}
                  className="customColumn"
                  cell={
                    column.field === "comments" ||
                    column.field === "additionalComments"
                      ? null
                      : column.field === "matchStatus"
                      ? DropDownCell
                      : ColumnCell
                  }
                  filterable={false} // Set this properly based on column config
                  headerCell={ColumnHeader}
                  minResizableWidth={30}
                  // editable={column.editable}
                  filter={column.filter}
                  columnMenu={(props) =>
                    column.field === "matchStatus" ? (
                      matchStatusFilter === 1 ? (
                        <ColumnMenuCheckboxFilter
                          props={props}
                          data={matchStatusOptions}
                        />
                      ) : null
                    ) : column.filter === "date" ? (
                      null
                    ) : (
                      <CustomColumnMenu
                        {...props}
                        columns={stateColumns}
                        onColumnsSubmit={onColumnsSubmit}
                      />
                    )
                  }
                />
              )
            );
          })}

          {/* <Column field="GPID" title="gpid" filterable="false" /> */}
        </Grid>
      }
    </>
  );
}