import { useState, useMemo, useCallback, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { AgGridReact } from 'ag-grid-react'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-quartz.css'
export default function StuffPlanQGrid(props) {
  const { planGridData, planGridColumns, isPageable = true } = props

  const [rowData, setRowData] = useState(null)
  // const [gridApi, setGridApi] = useState(null)
  const [colDefs, setColDefs] = useState(planGridColumns)
  const { getMessage } = useMessage()
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 100,
      sortable: false,
      suppressMovable: false,
      resizable: false,
      suppressSizeToFit: false,
    }
  }, [])

  const rowBuffer = 10

  useEffect(() => {
    planGridData ? setRowData(planGridData) : ''
  }, [planGridData])

  // const onGridReady = useCallback(
  //   (params) => {
  //     setGridApi(params.api)
  //     planGridData ? setRowData(planGridData) : ''
  //   },
  //   [planGridData],
  // )

  return (
    <div className="ag-theme-quartz" style={{ height: '100%' }}>
      <AgGridReact
        // onGridReady={onGridReady}
        rowBuffer={rowBuffer}
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        rowSelection={'singleRow'}
        pagination={isPageable}
        domLayout="autoHeight"
        suppressCellFocus={true}
        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
      />
    </div>
  )
}