'use client'

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 QGrid(props) {
  const { gridData, gridColumns, isPageable = true } = props
  const [count, setCount] = useState(0)
  const [clickedCount, setClickedCount] = useState(0)
  /**
   * 행 데이터를 설정할 때 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(() => {
    filter: true
  }, [])

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

  /**
   * 모든 렌더링에서 그리드 상태를 재설정하지 않도록 useCallback을 사용하는 것이 좋습니다.
   */
  const isRowSelectable = useCallback((node) => node.data.value > count, [count])

  /**
   * Event Listeners의 경우 이벤트 처리기가 그리드 내에서 업데이트를 트리거하지 않으므로 useCallback을 사용할 필요가 없습니다.
   * 그러나 콜백과 일관성을 유지하고 항상 useCallback을 사용하는 것이 더 쉬울 수 있습니다.
   */
  const onFilterOpened = useCallback(() => {
    console.log(`number of clicks is ${clickedCount}`)
  }, [clickedCount])

  // Fetch data & update rowData state
  useEffect(() => {
    // async function fetchData() {
    //   const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
    //   const data = await response.json()
    //   setRowData(data)
    // }

    console.log('use effect')
    gridData ? setRowData(gridData) : ''
  }, [gridData])

  return (
    <div
      className="ag-theme-quartz" // applying the Data Grid theme
      style={{ height: 500 }} // the Data Grid will fill the size of the parent container
    >
      <AgGridReact
        rowBuffer={rowBuffer}
        rowData={rowData}
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        isRowSelectable={isRowSelectable}
        onFilterOpened={onFilterOpened}
        pagination={isPageable}
      />
    </div>
  )
}