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 onCellDoubleClicked = useCallback((params) => {
    props.getCellDoubleClicked(params)
  }, [])

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