import { ReloadOutlined } from '@ant-design/icons'
import { Button, Card, Descriptions, Divider, Modal, Space } from 'antd'
import { Typography, List } from 'antd'
import Paragraph from 'antd/lib/typography/Paragraph'
import Title from 'antd/lib/typography/Title'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  privilegeControllerGetPrivilege,
  privilegeControllerRevokePrivilege
} from 'apiClient/services/devops'
import {
  PrivilegePrivilege,
  PrivilegePrivilegePhase
} from 'apiClient/services/devops/interface'
import ApprovalTable from 'components/ApprovalTable'
import { toLocal } from 'utils/time'

const PrivilegeDetail = () => {
  const { priv_id } = useParams<{
    priv_id: string
  }>()
  const [reload, setReload] = useState(false)
  const [priv_info, setPrivInfo] = useState<PrivilegePrivilege>()

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

  async function fetch() {
    try {
      const data = (await privilegeControllerGetPrivilege(priv_id)).data
      setPrivInfo(data.privilege)
    } catch (e) {
      console.error(e)
    }
  }

  const handleRevoke = () => {
    Modal.info({
      title: 'Info',
      closable: true,
      content: (
        <div>
          <p>
            Are you sure to revoke privilege <b>{priv_id}</b> ?
          </p>
        </div>
      ),
      okText: 'Confirm',
      async onOk() {
        try {
          await privilegeControllerRevokePrivilege(priv_id)
          Modal.success({
            title: 'Info',
            content: (
              <div>
                <p>
                  Revoked Privilege <b>{priv_id}</b>.
                </p>
              </div>
            ),
            onOk() {}
          })
          setReload((pre) => !pre)
        } catch (error) {
          Modal.error({
            title: error.response.data.errcode,
            content: error.response.data.errmsg
          })
          setReload((pre) => !pre)
        }
      }
    })
  }

  const [activeTabKey, setActiveTabKey] = useState<string>('approval')
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }

  const tabList = [
    {
      key: 'approval',
      tab: 'Approval'
    }
  ]

  const contentList: Record<string, React.ReactNode> = {
    approval: priv_info?.approval_id ? (
      <ApprovalTable id={priv_info?.approval_id}></ApprovalTable>
    ) : (
      <div>Loading...</div>
    )
  }

  return (
    <>
      <div>
        <Card
          title={<Title level={4}>{`Privilege Detail`}</Title>}
          extra={
            <Space>
              <Button
                type="ghost"
                disabled={
                  priv_info?.phase === PrivilegePrivilegePhase.revoked ||
                  priv_info?.phase === PrivilegePrivilegePhase.unapproved
                }
                onClick={handleRevoke}
              >
                Revoke
              </Button>
              &nbsp;
              <Button
                onClick={() => {
                  setReload((pre) => !pre)
                }}
                icon={<ReloadOutlined />}
              ></Button>
            </Space>
          }
        >
          <Title level={5}>Basic Information</Title>
          <Descriptions>
            <Descriptions.Item label="ID">{priv_info?.id}</Descriptions.Item>
            <Descriptions.Item label="Source">
              {priv_info?.source}
            </Descriptions.Item>
            <Descriptions.Item label="Phase">
              {priv_info?.phase}
            </Descriptions.Item>
            <Descriptions.Item label="Applicant">
              {priv_info?.applicant}
            </Descriptions.Item>
            <Descriptions.Item label="Created At">
              {toLocal(priv_info?.created_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Expire At">
              {toLocal(priv_info?.expired_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Closed At">
              {toLocal(priv_info?.closed_at)}
            </Descriptions.Item>
            <Descriptions.Item label="Reason">
              {priv_info?.reason}
            </Descriptions.Item>
          </Descriptions>

          <Divider />

          <Title level={5}>Users</Title>
          <List
            dataSource={priv_info?.bindings?.map((binding) => binding.user)}
            renderItem={(item) => (
              <List.Item>
                <Typography.Text>{item}</Typography.Text>
              </List.Item>
            )}
          />

          <Divider />

          <Title level={5}>Content</Title>
          <Typography>
            <Paragraph>
              <pre>
                <code>{JSON.stringify(priv_info?.content, null, 2)}</code>
              </pre>
            </Paragraph>
          </Typography>
        </Card>

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

export default PrivilegeDetail