import React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
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 StuffQGrid(props) {
  const { gridData, gridColumns, isPageable = true, count, gridRef } = props
  /**
   * 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
   */
  const [rowData, setRowData] = useState(null)

  /**
   * Column Definitions를 설정할 때는 useMemo 또는 useState를 사용하여 렌더 간에 일관된 참조를 유지하십시오.
   * 응용 프로그램이 Column Definitions를 동적으로 변경하는 경우에도 렌더링 간에 일관된 참조를 유지하려면 useMemo 또는 useState를 사용하십시오.
   */
  const [colDefs, setColDefs] = useState(
    gridColumns ?? [
      { field: 'mission', filter: true },
      { field: 'company' },
      { field: 'location' },
      { field: 'date' },
      { field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` },
      { field: 'successful' },
      { field: 'rocket' },
    ],
  )

  /**
   * defaultColDef 속성을 제공할 때 이 인라인 또는 구성 요소의 단순 개체로 정의하지 마십시오. 이렇게 하면 모든 렌더링에서 새 인스턴스가 생성됩니다.
   * 대신 or useState 를 사용하여 useMemo 렌더 간에 일관된 참조가 유지되도록 합니다.
   */
  const defaultColDef = useMemo(() => {
    return {
      filter: false,
      flex: 1,
      sortable: false,
      suppressMovable: true,
      resizable: false,
      suppressSizeToFit: false,
      headerClass: 'centered', //_test.scss에 추가 테스트
    }
  }, [])

  /**
   * 단순 유형(string, boolean 및 number)의 속성은 렌더링 간에 값으로 비교되므로 후크를 사용할 필요가 없습니다.
   */
  const rowBuffer = 100

  /**
   * 모든 렌더링에서 그리드 상태를 재설정하지 않도록 useCallback을 사용하는 것이 좋습니다.
   * api데이타 해당 컬럼에 따라 로우 체크박스 체크 가능여부 등 컨트롤
   */
  const isRowSelectable = useCallback(
    (params) => {
      return !!params.data
    },
    [count],
  )

  // 체크박스 체크시
  const onSelectionChanged = useCallback((event) => {
    props.getSelectedRowdata(event.api.getSelectedRows())
  }, [])

  //더블클릭
  const onCellDoubleClicked = useCallback((event) => {
    // if (event.column.colId === 'company') {
    //   return
    // } else {
    props.getCellDoubleClicked(event)
    // }
  }, [])

  //컨텐츠에 따라 컬럼넓이 자동조절
  const autoSizeStrategy = useMemo(() => {
    return {
      type: 'fitCellContents',
    }
  }, [])

  const onGridReady = useCallback((event) => {
    // console.log('event:::', event)
    // 헤더 사이즈 조정 컬럼에 width값으로 계산
    event.api.sizeColumnsToFit()
  }, [])

  // Fetch data & update rowData state
  useEffect(() => {
    gridData ? setRowData(gridData) : ''
  }, [gridData])

  return (
    <div className="ag-theme-quartz" style={{ height: 500 }}>
      <AgGridReact
        ref={gridRef}
        onGridReady={onGridReady}
        rowBuffer={rowBuffer}
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        isRowSelectable={isRowSelectable}
        rowSelection={'multiple'}
        suppressRowClickSelection={true}
        onSelectionChanged={onSelectionChanged}
        onCellDoubleClicked={onCellDoubleClicked}
        pagination={isPageable}
        //paginationPageSize={paginationPageSize}
        //paginationPageSizeSelector={paginationPageSizeSelector}
        autoSizeStrategy={autoSizeStrategy}
        overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
      />
    </div>
  )
}