import { ActionIcon, Badge, 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 TimeComponent from 'dbaas/components/TimeComponent'
import { TypesExportEvent } from 'dbaas/services'
import { eventTracking } from 'dbaas/utils/tracking'

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={() => ({
        content: { display: 'flex', flexDirection: 'column', overflow: 'hidden' },
        body: {
          flex: 1,
          height: 0,
          padding: '12px 0 12px 0'
        },
        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 justify="space-between" h="100%">
        <Stack gap="xl" px={24} 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={<TimeComponent time={data?.ends_at ?? ''} format="YYYY-MM-DD HH:mm:ss" />} />
          <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`,
                onIconClick: () => eventTracking(`Auditlog Detail Expand Clicked`)
              }}
            >
              {JSON.stringify(data, null, 4)}
            </CodeBlock>
          )}
        </Stack>
        <Stack>
          <Divider mt="xs" />
          <Group px="xl">
            <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>
        </Stack>
      </Stack>
    </Drawer>
  )
}