import { Button, Space, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useMemo } from 'react'

import { FormsRbacPrivilege } from 'apiClient/services/account/interface'
import { ListToolBar } from 'components/Table'

import { useFetchRBACPrivileges } from '../helpers'

import CreationModal from './CreationModal'
import DeletionPop from './DeletionPop'
import EditModal from './EditModal'

const PrivilegesPanel = () => {
  const { data, refetch, isLoading, isRefetching } = useFetchRBACPrivileges()
  const filterOptions = useMemo(
    () =>
      Array.from(new Set(data?.map((item) => item.system))).map((value) => ({
        value: value!,
        text: value!
      })),
    [data]
  )

  const columns: ColumnsType<FormsRbacPrivilege> = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 64,
      fixed: true
    },
    {
      title: 'Resource URI',
      dataIndex: 'resource_uri',
      width: 160
    },
    {
      title: 'URL Example',
      dataIndex: 'url',
      width: 160
    },
    {
      title: 'System',
      dataIndex: 'system',
      filters: filterOptions,
      onFilter: (value, record) => record.system === value,
      width: 120
    },
    {
      title: 'Description',
      dataIndex: 'description',
      width: 160
    }
    // {
    //   title: 'Action',
    //   dataIndex: 'action',
    //   width: 80,
    //   render: (_: any, record: FormsRbacPrivilege) => {
    //     return (
    //       <Space size="middle">
    //         <EditModal
    //           trigger={
    //             <Button style={{ padding: 0 }} type="link">
    //               Edit
    //             </Button>
    //           }
    //           record={record}
    //           onComplete={refetch}
    //         />
    //         <DeletionPop record={record} onComplete={refetch} />
    //       </Space>
    //     )
    //   }
    // }
  ]

  return (
    <div>
      <ListToolBar
        reload={async () => {
          await refetch()
        }}
        // actions={[
        //   <CreationModal
        //     onComplete={refetch}
        //     trigger={<Button type="primary">Add</Button>}
        //   />
        // ]}
      />
      <Table
        // scroll={{ x: 1200 }}
        columns={columns}
        loading={isLoading || isRefetching}
        dataSource={data}
        rowKey="id"
      />
    </div>
  )
}

export default PrivilegesPanel