import { Card, Descriptions, Divider, Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import Title from 'antd/lib/typography/Title'
import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  userServiceGetUser,
  userServiceListGroups
} from 'apiClient/services/core-server'
import {
  V1RoleBindingTargetType,
  V1User,
  V1UserGroup,
  V1UserGroupSource
} from 'apiClient/services/core-server/interface'
import { formatUserGroupSource } from 'pages/IAM/utils'

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

export default function UserDetail() {
  const { user_email } = useParams<{
    user_email: string
  }>()
  const [userInfo, setUserInfo] = useState<V1User>()
  const [userGroups, setUserGroups] = useState<V1UserGroup[]>()
  const [userGroupsLoading, setUserGroupsLoading] = useState<boolean>(false)
  const [reload, setReload] = useState(false)
  const [activeTabKey, setActiveTabKey] = useState<string>('memberships')

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

  async function fetch() {
    try {
      const userData = (await userServiceGetUser(user_email)).data
      setUserInfo(userData.user)
      setUserGroupsLoading(true)
      const userGroupData = (
        await userServiceListGroups({
          userHave: user_email,
          perPage: 100 /*enough*/,
          withTag: true
        })
      ).data
      setUserGroups(userGroupData.groups)
    } catch (e) {
      console.error(e)
    } finally {
      setUserGroupsLoading(false)
    }
  }

  const columnsUserGroup: ColumnsType<V1UserGroup> = [
    {
      title: 'Group Name',
      render: (_: any, record) => {
        if (!record.base?.name) {
          return '-'
        }

        const tagName = record.tags?.find((tag) => tag.key === 'Name')?.value
        const displayName =
          record.base.source === V1UserGroupSource.USER_GROUP_SOURCE_LARK
            ? `${tagName || '-'} (${record.base.name})`
            : record.base.name

        return (
          <a href={'/iam/entity/usergroups/' + record.base.name}>
            {displayName}
          </a>
        )
      }
    },
    {
      title: 'Description',
      render: (_: any, record) => {
        return record.base?.description
      }
    },
    {
      title: 'Source',
      render: (_: any, record) => {
        return formatUserGroupSource(record.base?.source)
      }
    }
  ]

  const tabList = [
    {
      key: 'memberships',
      tab: 'User Groups Membership'
    },
    {
      key: 'roles',
      tab: 'Roles'
    },
    {
      key: 'permissions',
      tab: 'Permissions'
    }
  ]

  const contentList: Record<string, React.ReactNode> = {
    memberships: (
      <Table<V1UserGroup>
        rowKey={(record) => record.base?.name || ''}
        columns={columnsUserGroup}
        dataSource={userGroups}
        loading={userGroupsLoading}
        pagination={{ pageSize: 10 }}
        size="small"
      ></Table>
    ),
    roles: (
      <ShowBindingRoles
        target={{
          name: user_email,
          type: V1RoleBindingTargetType.ROLE_BINDING_TARGET_TYPE_USER
        }}
      />
    ),
    permissions: (
      <ShowPermissions
        target={{
          name: user_email,
          type: V1RoleBindingTargetType.ROLE_BINDING_TARGET_TYPE_USER
        }}
      />
    )
  }

  return (
    <>
      <div>
        <Card title={<Title level={4}>{`User '${user_email}'`}</Title>}>
          <Descriptions>
            <Descriptions.Item label="Name">
              {userInfo?.larkUserName}
            </Descriptions.Item>
            <Descriptions.Item label="Email">
              {userInfo?.email}
            </Descriptions.Item>
            <Descriptions.Item label="Lark Type">
              {userInfo?.larkType}
            </Descriptions.Item>
            <Descriptions.Item label="Department">
              {userInfo?.larkDepartmentName}
            </Descriptions.Item>
          </Descriptions>

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