import type { CommonProps } from '@/proxy/common'
import { Card, Tag } from '@/components/ui'
import { NotificationChannelColors } from '@/constants/notification-channel.enum'
import { NotificationDto } from '@/proxy/notification/models'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useLocalization } from '@/utils/hooks/useLocalization'

type EventProps = {
  data: NotificationDto
}

const HighlightedText = ({ children, className }: CommonProps) => {
  return (
    <span className={classNames('font-semibold text-gray-900 dark:text-gray-100', className)}>
      {children}
    </span>
  )
}

const Event = ({ data }: EventProps) => {
  const { translate } = useLocalization()

  return (
    <>
      <div className="my-1 flex flex-wrap items-center">
        <div>
          <HighlightedText>{data.notificationType}</HighlightedText>{' '}
          {translate('::Abp.Identity.ActivityLogs.SentNotification')}
        </div>

        <Tag
          prefix
          className="mx-1"
          prefixClass={NotificationChannelColors[data.notificationChannel] ?? 'bg-gray-400'}
        >
          {translate(`::App.NotificationChannel.${data.notificationChannel}`)}
        </Tag>

        {data.creatorFullname && <span className="ml-1">{data.creatorFullname}</span>}

        <span className="ml-3 rtl:mr-3">{dayjs(data.creationTime).format('LT')}</span>
      </div>
      {data.message && (
        <Card bordered className="mt-4">
          {data.message}
        </Card>
      )}
    </>
  )
}

export default Event