import { PlusOutlined } from '@ant-design/icons'
import { Button, Modal, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'

import {
  privilegeControllerListPrivileges,
  privilegeControllerRequestPrivilege
} from 'apiClient/services/devops'
import {
  PrivilegePrivilege,
  PrivilegeRequestPrivilegeReq,
  PrivilegePrivilegeType
} from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'
import { ListToolBar, useTable } from 'components/Table'
import { toLocal } from 'pages/Devops/Maintenance/Detail'

import {
  RequestPrivilegeFormType,
  RequestPrivilegeForm
} from './Forms/RequestPrivilege'

export default function Privilege() {
  const [requestPrivilegeModalOpen, setRequestPrivilegeModalOpen] =
    useState(false)

  const getData = (params?: Partial<PageInfo>) =>
    privilegeControllerListPrivileges({
      page: params?.page,
      per_page: params?.pageSize
    })

  const { dataSource, loading, reload, paginationProps, onTableChange } =
    useTable<ListData<PrivilegePrivilege>>(getData, [], {
      pagination: true
    })

  const handleCreate = useCallback(
    async (payload: RequestPrivilegeFormType) => {
      const req: PrivilegeRequestPrivilegeReq = {
        binding_users: payload.users,
        expired_at: payload.expired_at.unix(),
        reason: payload.reason
      }
      if (payload.type === PrivilegePrivilegeType.approval) {
        req.approval = {
          scopes: payload.approval_scopes
        }
      }

      return privilegeControllerRequestPrivilege(req)
        .then(() => {
          setRequestPrivilegeModalOpen(false)
          reload()
        })
        .catch((e) => {
          Modal.error({
            title: e.response.data.errcode,
            content: e.response.data.errmsg
          })
        })
    },
    [reload]
  )

  const columns: ColumnsType<PrivilegePrivilege> = [
    {
      title: 'ID',
      render: (_: any, record) => {
        return record.id
      }
    },
    {
      title: 'Source',
      render: (_: any, record) => {
        return record.source
      }
    },
    {
      title: 'Applicant',
      render: (_: any, record) => {
        return record.applicant
      }
    },
    {
      title: 'Reason',
      render: (_: any, record) => {
        return record.reason
      }
    },
    {
      title: 'Created At',
      render: (_: any, record) => {
        return toLocal(record.created_at)
      }
    },
    {
      title: 'Expire At',
      render: (_: any, record) => {
        return toLocal(record.expired_at)
      }
    },
    {
      title: 'Phase',
      render: (_: any, record) => {
        return record.phase
      }
    },
    {
      title: 'Action',
      render: (_: any, record: PrivilegePrivilege) => {
        return (
          <div>
            <Button type="link">
              <Link target="_blank" to={`/privilege/${record.id}`}>
                Detail
              </Link>
            </Button>
          </div>
        )
      }
    }
  ]

  const actions = useMemo(
    () => [
      <Button
        type="primary"
        icon={<PlusOutlined />}
        onClick={() => setRequestPrivilegeModalOpen(true)}
      >
        Request Privilege
      </Button>
    ],
    []
  )

  return (
    <div>
      <ListToolBar actions={actions} reload={reload}></ListToolBar>

      <Table<PrivilegePrivilege>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>

      <ModalForm<RequestPrivilegeFormType>
        visible={!!requestPrivilegeModalOpen}
        name="request privilege"
        title="Request OpsPortal Privileges"
        getFields={() => {
          return <RequestPrivilegeForm />
        }}
        onSubmit={handleCreate}
        onCancel={() => {
          setRequestPrivilegeModalOpen(false)
        }}
      />
    </div>
  )
}