import { usePersistFn } from 'ahooks'
import React, { useCallback } from 'react'
import { CardTable, ICardTableProps } from 'components'
import DetailPage from '../Detail'
import { ISlowQueryTableController } from './useSlowQueryTableController'
import { openLink } from 'utils'
import { useLocation, useNavigate } from 'react-router-dom'

interface Props extends Partial<ICardTableProps> {
  controller: ISlowQueryTableController
}

function SlowQueriesTable({ controller, ...restProps }: Props) {
  const {
    loadingSlowQueries,
    tableColumns,
    slowQueries,
    orderOptions: { orderBy, desc },
    changeOrder,
    errors,
    visibleColumnKeys,

    saveClickedItemIndex,
    getClickedItemIndex
  } = controller
  const { search } = useLocation()

  const navigate = useNavigate()
  const handleRowClick = usePersistFn(
    (rec, idx, ev: React.MouseEvent<HTMLElement>) => {
      saveClickedItemIndex(idx)
      const qs = DetailPage.buildQuery({
        id: rec.id
      })
      openLink(`/slowquery/detail${search}&${qs}`, ev, navigate)
    }
  )

  const getKey = useCallback((row) => `${row.digest}_${row.timestamp}`, [])

  return (
    <CardTable
      {...restProps}
      loading={loadingSlowQueries}
      columns={tableColumns}
      items={slowQueries}
      orderBy={orderBy}
      desc={desc}
      onChangeOrder={changeOrder}
      errors={errors}
      visibleColumnKeys={visibleColumnKeys}
      onRowClicked={handleRowClick}
      clickedRowIndex={getClickedItemIndex()}
      getKey={getKey}
    />
  )
}

export default SlowQueriesTable