import { ActionIcon, CopyButton, Divider, Drawer, Flex, Tooltip, Typography, HoverCard } from '@tidbcloud/uikit'
import { createStyles } from '@tidbcloud/uikit/emotion'
import { IconCheck, IconCopy01 } from '@tidbcloud/uikit/icons'

import TimeComponent from 'dbaas/components/TimeComponent'
import { DtoDataAppLogEntry } from 'dbaas/services/dataservice/interface'

export const useLogDetailItem = createStyles(() => {
  return {
    LogItemContent: {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      WebkitBoxOrient: 'vertical',
      WebkitLineClamp: 10
    }
  }
})

export const Item = ({
  label,
  content,
  withCopy
}: {
  label: string | React.ReactNode
  content: string | React.ReactNode
  withCopy?: boolean
}) => {
  return (
    <Flex mb={16} align="top">
      <Typography variant="label-lg" w={200} sx={{ flexShrink: 0 }}>
        {label}
      </Typography>
      {withCopy ? (
        <Flex sx={{ flex: 1 }} justify="space-between">
          <Typography variant="body-lg">{content}</Typography>
          {!!content && <LogCopyButton value={`${content}`} />}
        </Flex>
      ) : (
        <Typography sx={{ flex: 1, wordBreak: 'break-all' }} variant="body-lg">
          {content}
        </Typography>
      )}
    </Flex>
  )
}

export const MulitItem = ({ label, content }: { label: string | React.ReactNode; content: string }) => {
  const { classes } = useLogDetailItem()

  return (
    <Flex mb={16} align="top">
      <Typography variant="label-lg" w={200} sx={{ flexShrink: 0 }}>
        {label}
      </Typography>
      <Flex sx={{ flex: 1, wordBreak: 'break-all' }} justify="space-between">
        <HoverCard shadow="lg" width={400} position="top" withArrow>
          <HoverCard.Target>
            <Typography variant="body-lg" className={classes.LogItemContent}>
              {content}
            </Typography>
          </HoverCard.Target>
          <HoverCard.Dropdown>{content}</HoverCard.Dropdown>
        </HoverCard>
        {!!content && <LogCopyButton value={content} />}
      </Flex>
    </Flex>
  )
}

export const LogCopyButton = ({ value }: { value: string }) => {
  return (
    <CopyButton value={value} timeout={2000}>
      {({ copied, copy }) => (
        <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
          <ActionIcon aria-label="Copy log" variant="transparent" size="sm" onClick={copy}>
            {copied ? <IconCheck size={14} /> : <IconCopy01 size={14} strokeWidth={2.5} onClick={copy} />}
          </ActionIcon>
        </Tooltip>
      )}
    </CopyButton>
  )
}

const LogDetail = ({
  close,
  opened,
  data
}: {
  opened: boolean
  close: () => void
  data: DtoDataAppLogEntry | null
}) => {
  return (
    <Drawer
      title={<Typography variant="title-lg">Request Details</Typography>}
      position="right"
      size={640}
      opened={opened}
      trapFocus={false}
      onClose={close}
      styles={(theme) => ({
        body: {
          height: 'calc(100% - 70px)',
          paddingLeft: '24px',
          paddingRight: '24px',
          overflowY: 'auto'
        },
        header: {
          padding: '12px 24px',
          borderBottom: `1px solid ${theme.colors.carbon[3]}`
        }
      })}
    >
      <Item label="name" content={data?.endpoint_name} />
      <Item label="Operation Id" withCopy content={data?.endpoint_id} />
      <Item label="Date Time" content={<TimeComponent time={data?.date_time || ''} />} />
      <Divider c="carbon.5" my="md" mx={-24} />

      <Item label="Request Id" withCopy content={data?.request_id} />
      <Item
        label="Request URL"
        content={
          <Flex justify="space-between">
            <Typography variant="action-md" fw={400}>
              {data?.req_url}
            </Typography>
            {!!data?.req_url && <LogCopyButton value={data.req_url} />}
          </Flex>
        }
      />
      <MulitItem label="Request Header" content={data?.req_header ?? ''} />
      <MulitItem label="Query Parameters" content={data?.query_param ?? ''} />
      <MulitItem label="Request Body" content={data?.req_body ?? ''} />
      <Item label="Client Info" withCopy content={data?.client_info} />
      <Divider c="carbon.5" my="md" mx={-24} />

      <Item label="Response Code" content={data?.http_code} />
      <Item label="Response Message" content={data?.http_code_message} />
      <MulitItem label="Response Body" content={data?.response_body ?? ''} />
      <Item label="Response Rows Count" content={data?.resp_row_count} />
      <Item label="Response Time" content={data?.response_time || ''} />
      <Item label="Response Size" content={data?.response_size} />
      <Item label="Response Cached" content={data?.rsp_cached ? 'Yes' : 'No'} />
    </Drawer>
  )
}

export default LogDetail