import { Box, Group, Stack, Typography } from '@tidbcloud/uikit'
import DOMPurify from 'dompurify'
import { observer } from 'mobx-react'

import TimeComponent from 'dbaas/components/TimeComponent'
import { FormsNotification } from 'dbaas/services/notification/interface'

import { TypeIcon } from './TypeIcon'

const NotificationDetail = observer(({ data }: { data: FormsNotification | null }) => {
  if (!data) {
    return null
  }

  return (
    <Stack
      gap={24}
      px={24}
      pt={16}
      sx={(t) => ({
        flex: '0 0 560px',
        borderLeft: `1px solid ${t.colors.carbon[4]}`,
        maxHeight: 'calc(100vh - 174px)',
        overflow: 'auto'
      })}
    >
      <Group align="flex-start">
        <Box mt={4}>
          <TypeIcon type={data?.notification_group || ''} />
        </Box>
        <Box sx={{ flex: 1, flexWrap: 'wrap' }}>
          <Typography variant="title-lg">{data?.worker_flow_name}</Typography>
          <Typography variant="body-sm" c="carbon.7">
            <TimeComponent time={data?.send_at || ''} />
          </Typography>
        </Box>
      </Group>
      <Box
        // fix ul, ol, p style
        sx={(theme) => ({
          wordBreak: 'break-all',
          ul: { listStyle: 'initial' },
          ol: { listStyle: 'decimal' },
          'ul, ol': { marginBlockStart: '1em', marginBlockEnd: '1em', paddingLeft: 20 },
          p: { margin: '0em 0em 1em', minHeight: 1 },
          span: { color: `${theme.black} !important`, backgroundColor: 'transparent !important' },
          a: { span: { color: `${theme.colors.peacock[7]} !important` } }
        })}
        dangerouslySetInnerHTML={{
          __html: DOMPurify.sanitize(data?.in_app_content || '')
        }}
      />
    </Stack>
  )
})
export default NotificationDetail