import { Table } from '@tidbcloud/uikit'
import { useMemo } from 'react'

import { DmBlockAllowRules } from 'dbaas/services/dataflow/interface'

const SelectedObjects = ({ rules }: { rules?: DmBlockAllowRules }) => {
  const data = useMemo(() => {
    const res = [] as Array<{ db: string; table?: string }>
    if (!rules) return res

    rules.do_dbs?.forEach((i) => res.push({ db: i }))
    rules.do_tables?.forEach((i) => res.push({ db: i.schema!, table: i.table }))

    return res
  }, [rules])

  const rows = data.map((element, i) => (
    <Table.Tr key={i}>
      <Table.Td>{element.db}</Table.Td>
      <Table.Td>{element.table ?? '*'}</Table.Td>
    </Table.Tr>
  ))

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Database</Table.Th>
          <Table.Th>Table</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  )
}

export default SelectedObjects