import {
  ActionIcon,
  Badge,
  Box,
  Divider,
  Drawer,
  Group,
  Stack,
  Typography
} from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import { IconChevronLeft, IconChevronRight } from '@tidbcloud/uikit/icons'
import { ReactNode, useEffect, useState } from 'react'

import { TypesExportEvent } from 'apiClient/services/audit/interface'
import { format } from 'utils/time'

const Filed = ({ label, value }: { label: ReactNode; value: ReactNode }) => {
  return (
    <Group gap={48}>
      <Typography variant="label-lg" w={100}>
        {label}
      </Typography>
      <Typography variant="body-lg">{value}</Typography>
    </Group>
  )
}

export const DetailDrawer = ({
  opened,
  onClose,
  index,
  list
}: {
  opened: boolean
  onClose: () => void
  index: number
  list?: TypesExportEvent[]
}) => {
  const [dataIndex, setDataIndex] = useState(index)

  useEffect(() => setDataIndex(index), [index])

  const data = list?.[dataIndex]

  return (
    <Drawer
      styles={() => ({
        drawer: {
          display: 'flex',
          flexDirection: 'column'
        },
        body: {
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          overflow: 'hidden'
        },
        header: {
          padding: '16px 16px 16px 24px',
          marginBottom: 0
        }
      })}
      title={<Typography variant="title-lg">Audit log details</Typography>}
      position="right"
      size={480}
      opened={opened}
      onClose={onClose}
    >
      <Stack gap="xl" px="xl" style={{ overflowY: 'auto' }}>
        <Filed label="Type" value={data?.type} />
        <Filed
          label="Status"
          value={
            <Badge
              color={data?.result === 'Success' ? 'green' : 'red'}
              variant="dot"
              size="lg"
              sx={{ padding: 0 }}
            >
              {data?.result}
            </Badge>
          }
        />
        <Filed
          label="Time"
          value={format(
            data?.ends_at ?? '',
            undefined,
            'YYYY-MM-DD HH:mm:ss',
            0
          )}
        />
        <Filed label="Operator" value={data?.operator_email} />
        <Filed label="Operator type" value={data?.operator_type} />
        <Filed label="Client IP" value={data?.operator_ip} />
        <Filed label="Trace ID" value={data?.trace_id} />
        <Filed label="Login with" value={data?.operator_login_method} />
        <Typography variant="label-lg" w={100}>
          Raw log data
        </Typography>
        {data && (
          <CodeBlock
            language="json"
            foldProps={{
              persistenceKey: `dbaas.auditlog.detail`,
              iconVisible: true
            }}
          >
            {JSON.stringify(data, null, 4)}
          </CodeBlock>
        )}
      </Stack>
      <Box>
        <Divider mt="xs" />
        <Group px="xl" py="xs">
          <ActionIcon
            size={32}
            variant="default"
            disabled={dataIndex === 0}
            onClick={() => setDataIndex(dataIndex - 1)}
          >
            <IconChevronLeft size={16} strokeWidth={2} />
          </ActionIcon>
          <ActionIcon
            size={32}
            variant="default"
            disabled={dataIndex === (list?.length ?? 0) - 1}
            onClick={() => setDataIndex(dataIndex + 1)}
          >
            <IconChevronRight size={16} strokeWidth={2} />
          </ActionIcon>
        </Group>
      </Box>
    </Drawer>
  )
}