import {
  Button,
  Card,
  Checkbox,
  Descriptions,
  Divider,
  Input,
  Modal,
  Space,
  Table
} from 'antd'
import { ColumnsType } from 'antd/lib/table'
import Title from 'antd/lib/typography/Title'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'

import {
  iAMServiceDeleteAPIKey,
  iAMServiceGetAPIKey
} from 'apiClient/services/core-server'
import {
  V1APIKey,
  V1RoleBindingTargetType
} from 'apiClient/services/core-server/interface'
import ModalForm from 'components/ModalForm'
import { showErrorModal } from 'pages/IAM/utils'
import { toLocal } from 'utils/time'

import ShowPermissions from '../../Role/Policy/Forms/ShowPermissions'
import ShowBindingRoles from '../../Role/Role/Forms/ShowBindingRoles'

import DeleteAPIKeyForm, {
  DeleteAPIKeyFormType
} from './Forms/DeleteAPIKeyForm'

export default function APIKeyDetail() {
  const { key_name } = useParams<{
    key_name: string
  }>()
  const [keyInfo, setKeyInfo] = useState<V1APIKey>()
  const [deleteAPIKey, setDeleteAPIKey] = useState(false)
  const [activeTabKey, setActiveTabKey] = useState<string>('roles')
  const history = useHistory()

  useEffect(() => {
    fetch()
  }, [])

  async function fetch() {
    try {
      const data = (await iAMServiceGetAPIKey(key_name)).data
      setKeyInfo(data.apiKey)
    } catch (e) {
      console.error(e)
    }
  }

  const renderDeleteFormFields = useCallback(() => {
    return <DeleteAPIKeyForm key_name={key_name} />
  }, [deleteAPIKey])

  const handleDelete = useCallback(async (payload: DeleteAPIKeyFormType) => {
    try {
      await iAMServiceDeleteAPIKey(key_name)
      Modal.success({
        title: 'Info',
        content: (
          <div>
            <p>{`API Key '${key_name}' has been deleted.`}</p>
          </div>
        ),
        onOk() {
          history.push('/iam/entity')
        }
      })
    } catch (error) {
      showErrorModal(error)
    }
  }, [])

  const tabList = [
    {
      key: 'roles',
      tab: 'Roles'
    },
    {
      key: 'permissions',
      tab: 'Permissions'
    }
  ]
  const contentList: Record<string, React.ReactNode> = {
    roles: (
      <ShowBindingRoles
        target={{
          name: key_name,
          type: V1RoleBindingTargetType.ROLE_BINDING_TARGET_TYPE_API_KEY
        }}
      />
    ),
    permissions: (
      <ShowPermissions
        target={{
          name: key_name,
          type: V1RoleBindingTargetType.ROLE_BINDING_TARGET_TYPE_API_KEY
        }}
      />
    )
  }

  return (
    <>
      <div>
        <Card
          title={<Title level={4}>{`API Key '${key_name}'`}</Title>}
          extra={
            <Space>
              <Button
                type="ghost"
                onClick={() => {
                  setDeleteAPIKey(true)
                }}
              >
                Delete
              </Button>
            </Space>
          }
        >
          <Descriptions>
            <Descriptions.Item label="Name">{keyInfo?.name}</Descriptions.Item>
            <Descriptions.Item label="Owner">
              {keyInfo?.owner}
            </Descriptions.Item>
            <Descriptions.Item label="Created At">
              {toLocal(keyInfo?.createdAt)}
            </Descriptions.Item>
            <Descriptions.Item label="Comment">
              {keyInfo?.comment}
            </Descriptions.Item>
          </Descriptions>

          <Divider />
          <Card
            tabList={tabList}
            tabProps={{ size: 'middle' }}
            bordered={false}
            activeTabKey={activeTabKey}
            onTabChange={(key) => {
              setActiveTabKey(key)
            }}
          >
            {contentList[activeTabKey]}
          </Card>

          <ModalForm<DeleteAPIKeyFormType>
            visible={!!deleteAPIKey}
            name="deleteAPIKey"
            title={`Delete API Key ${key_name}`}
            getFields={renderDeleteFormFields}
            onSubmit={handleDelete}
            onCancel={() => {
              setDeleteAPIKey(false)
            }}
            width={1000}
          />
        </Card>
      </div>
    </>
  )
}