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

import TimeComponent from 'dbaas/components/TimeComponent'
import { useAccessCheck } from 'dbaas/contexts/access-control'

import { DetailsDrawer } from '../../shared/DetailsDrawer'
import { instanceRoleOptions, orgRoleOptions, projectRoleOptions } from '../../users/shared/roles'
import { RolesDetail, useRolesGroup } from '../../users/shared/roles/RolesView'
import { CodeWithAction } from '../components/CodeWithAction'
import DeletionConfirm from '../deletion-confirm/DeletionConfirm'
import { APIKeyItem, getPrivateKeyDisplay } from '../shared/helpers'
import { mpEvents } from '../tracker'

interface ViewModalProps {
  opened: boolean
  data?: APIKeyItem
  onEdit?: (data: APIKeyItem) => void
  onClose: () => void
  onPrev?: () => void
  onNext?: () => void
  disablePrev?: boolean
  disableNext?: boolean
}

export const DetailView: React.FC<React.PropsWithChildren<ViewModalProps>> = observer(
  ({ opened, data, onEdit, onClose, onPrev, onNext, disablePrev, disableNext }) => {
    const [isDeletionModalOpened, setIsDeletionModalOpened] = useState(false)
    const orgAPIKeysActionEnabled = useAccessCheck('OrgAPIKeysV2Action')
    const { projectRoles, instanceRoles, orgRole } = useRolesGroup(data)

    const totalRoles =
      (data?.org_role?.rbac_role ? 1 : 0) + (data?.project_roles?.length || 0) + (data?.cluster_roles?.length || 0)
    return (
      <DetailsDrawer opened={opened} onClose={onClose} title="API Key Details" size={560} trapFocus={false}>
        {data && (
          <>
            <DetailsDrawer.Body>
              <DetailsDrawer.Item label="Public Key">
                <CodeWithAction copyIconProps={{ 'data-mp-event': mpEvents.copyPublicKey }}>
                  {data.public_key || ''}
                </CodeWithAction>
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Private Key">
                <CodeWithAction noCopy>{getPrivateKeyDisplay()}</CodeWithAction>
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Description">{data.description || '-'}</DetailsDrawer.Item>
              <DetailsDrawer.Item label="Created by">{data.created_by || '-'}</DetailsDrawer.Item>
              <DetailsDrawer.Item label="Created at">
                {data.created_at ? <TimeComponent time={data.created_at} /> : '-'}
              </DetailsDrawer.Item>
              <DetailsDrawer.Item label="Updated at">
                {data.updated_at ? <TimeComponent time={data.updated_at} /> : '-'}
              </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} />
              {!!data.project_roles?.length && (
                <RolesDetail title="Project Access" rolesMaps={projectRoles || {}} roles={projectRoleOptions} />
              )}
              {!!data.cluster_roles?.length && (
                <RolesDetail title="Instance Access" rolesMaps={instanceRoles || {}} roles={instanceRoleOptions} />
              )}

              <Alert icon={<IconInfoCircle size={14} />} color="peacock" mt={16}>
                For security reason, a full private key is not displayed after creation.
              </Alert>
            </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>
                <div>
                  <Button variant="default" onClick={() => onEdit?.(data)} disabled={!orgAPIKeysActionEnabled}>
                    Edit Role
                  </Button>
                  <Button
                    variant="outline"
                    color="red"
                    ml="md"
                    onClick={() => setIsDeletionModalOpened(true)}
                    disabled={!orgAPIKeysActionEnabled}
                  >
                    Delete
                  </Button>
                </div>
              </Flex>
            </DetailsDrawer.Footer>
            {isDeletionModalOpened && (
              <DeletionConfirm
                key={data.id}
                visible={isDeletionModalOpened}
                onClose={() => setIsDeletionModalOpened(false)}
                data={data}
                onConfirm={async () => {
                  setIsDeletionModalOpened(false)
                  onClose()
                }}
              />
            )}
          </>
        )}
      </DetailsDrawer>
    )
  }
)