import { ActionIcon, Button, Flex, Typography } from '@tidbcloud/uikit'
import { IconChevronLeft, IconChevronRight } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useState } from 'react'

import TimeComponent from 'dbaas/components/TimeComponent'
import { AccessCheck } from 'dbaas/contexts/access-control'
import { CentralConsoleUser } from 'dbaas/services/account/interface'
import useStores from 'dbaas/stores/useStores'

import { DetailsDrawer } from '../../shared/DetailsDrawer'
import { UserDeletionModal } from '../DeletionModal'
import { instanceRoleOptions, orgRoleOptions, projectRoleOptions } from '../shared/roles'
import { RolesDetail, useRolesGroup } from '../shared/roles/RolesView'
import { StatusTag } from '../shared/status'

interface UserDetailProps {
  opened: boolean
  user?: CentralConsoleUser
  onEdit?: (user: CentralConsoleUser) => void
  onClose: () => void
  onPrev?: () => void
  onNext?: () => void
  disablePrev?: boolean
  disableNext?: boolean
}

export const UserDetail = observer(
  ({ opened, user, onClose, onNext, onPrev, disableNext, disablePrev, onEdit }: UserDetailProps) => {
    const [isDeletionModalOpened, setIsDeletionModalOpened] = useState(false)
    const {
      store: { userProfile }
    } = useStores()

    const { projectRoles, instanceRoles, orgRole } = useRolesGroup(user)

    const showDelete = user?.email !== userProfile.email

    const totalRoles =
      (user?.org_role?.rbac_role ? 1 : 0) + (user?.project_roles?.length || 0) + (user?.cluster_roles?.length || 0)

    return (
      <DetailsDrawer opened={opened} onClose={onClose} title="User Detail" size={560} trapFocus={false}>
        {user && (
          <>
            <DetailsDrawer.Body>
              <Typography lh="28px" fw={700} fz={20} c="carbon.8">
                {user.email}
              </Typography>

              <DetailsDrawer.Item label="Status" mt={24}>
                <StatusTag status={user.status || ''} />
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Invite Time">
                <TimeComponent time={user.invite_time || ''} />
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Last Login Time">
                {user.login_time ? (
                  <TimeComponent time={user.login_time} />
                ) : user.status === 'ACTIVE' ? (
                  '-'
                ) : (
                  'Has not logged in yet'
                )}
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Role and Scope">
                {totalRoles} {totalRoles === 1 ? 'role' : 'roles'}
              </DetailsDrawer.Item>

              <RolesDetail title="Organization Access" rolesMaps={orgRole || {}} roles={orgRoleOptions} mt={8} />
              {!!user.project_roles?.length && (
                <RolesDetail title="Project Access" rolesMaps={projectRoles || {}} roles={projectRoleOptions} />
              )}
              {!!user.cluster_roles?.length && (
                <RolesDetail title="Instance Access" rolesMaps={instanceRoles || {}} roles={instanceRoleOptions} />
              )}
            </DetailsDrawer.Body>
            <DetailsDrawer.Footer>
              <Flex justify="space-between" sx={{ flex: 1 }}>
                <div>
                  <ActionIcon variant="default" size={40} onClick={onPrev} disabled={disablePrev}>
                    <IconChevronLeft size={18} />
                  </ActionIcon>
                  <ActionIcon variant="default" size={40} ml="md" onClick={onNext} disabled={disableNext}>
                    <IconChevronRight size={18} />
                  </ActionIcon>
                </div>
                <AccessCheck id="OrgUsersV2Action">
                  {({ accessible }) => (
                    <div>
                      <Button variant="default" disabled={!accessible} onClick={() => onEdit?.(user)}>
                        Edit Role
                      </Button>
                      {showDelete && (
                        <Button
                          variant="outline"
                          color={accessible ? 'red' : undefined}
                          ml="md"
                          disabled={!accessible}
                          onClick={() => setIsDeletionModalOpened(true)}
                        >
                          Delete
                        </Button>
                      )}
                    </div>
                  )}
                </AccessCheck>
              </Flex>
            </DetailsDrawer.Footer>
            {isDeletionModalOpened && showDelete && (
              <UserDeletionModal
                key={user.id}
                user={user}
                opened={true}
                onClose={() => setIsDeletionModalOpened(false)}
                onFinish={() => onClose()}
              />
            )}
          </>
        )}
      </DetailsDrawer>
    )
  }
)