import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { Button, Form, Input, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useState } from 'react'

import { useGetAllNotifications } from 'apiClient/services/notification'
import {
  FormsOpsNotification,
  GetAllNotificationsParams
} from 'apiClient/services/notification/interface'

export default function ActivityFeedList() {
  const [page, setPage] = useState<number>(0)

  const [form] = Form.useForm<GetAllNotificationsParams>()

  const { data, isFetching, refetch } = useGetAllNotifications(
    { ...form.getFieldsValue(), ...{ page } },
    {
      query: {
        retry: false,
        refetchOnWindowFocus: false,
        refetchInterval: false,
        refetchIntervalInBackground: false
      }
    }
  )

  const listData = data?.data.data

  const columns: ColumnsType<FormsOpsNotification> = [
    {
      title: 'Notification Subject',
      render: (_, row) => row.notification?.worker_flow_name
    },
    {
      title: 'TransactionID',
      render: (_, row) => row.notification?.transaction_id
    },
    {
      title: 'Recipient',
      render: (_, row) => row.notification?.subscriber_id
    },
    {
      title: 'Target Roles',
      dataIndex: 'roles'
    },
    {
      title: 'Status',
      render: (_, row) => row.notification?.status
    },
    {
      title: 'SendAt',
      render: (_, row) => row.notification?.send_at
    },
    {
      title: 'Sent By',
      render: (_, row) => row.notification?.send_by
    }
  ]

  const filter = (
    <Form
      form={form}
      layout="vertical"
      onFinish={() => {
        setPage(0)
        refetch()
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <Form.Item name="work_flow_name_like" label="Notification Subject">
          <Input />
        </Form.Item>
        <Form.Item name="org_id" label="Recipient Org ID">
          <Input />
        </Form.Item>
        <Form.Item name="transaction_id" label="Transaction ID">
          <Input />
        </Form.Item>
        <Form.Item name="user_id" label="User ID">
          <Input />
        </Form.Item>
        <Button
          onClick={() => {
            form.resetFields()
          }}
        >
          Clear
        </Button>
        <Button htmlType="submit" type="primary">
          Search
        </Button>
      </div>
    </Form>
  )

  const pagination = (
    <div
      style={{
        display: 'flex',
        gap: '10px',
        justifyContent: 'flex-end',
        marginTop: '10px'
      }}
    >
      <Button
        icon={<LeftOutlined />}
        disabled={page === 0 || isFetching}
        onClick={() => {
          setPage(page - 1)
          refetch()
        }}
      ></Button>
      <Button
        icon={<RightOutlined />}
        disabled={!data?.data.has_more || isFetching}
        onClick={() => {
          setPage(page + 1)
          refetch()
        }}
      ></Button>
    </div>
  )

  return (
    <>
      {filter}
      <Table
        rowKey={(record) => record.notification?.transaction_id ?? ''}
        loading={isFetching}
        dataSource={listData || []}
        pagination={false}
        columns={columns}
      />
      {pagination}
    </>
  )
}