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
  compact?: boolean
}

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

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

  return (
    <>
      {compact ? (
        <>
          <div className="flex flex-col gap-y-0.5">
            <HighlightedText>{data.creatorFullname}</HighlightedText>
            <span className="text-xs">{dayjs(data.creationTime).format('hh:mm A')}</span>
          </div>
          <div className="mt-4">
            <span className="mx-1">
              {translate('::Abp.Identity.ActivityLogs.SentNotificationOfType', {
                type: data.notificationType,
              })}{' '}
            </span>

            <Tag
              prefix
              className="mx-1"
              prefixClass={`${NotificationChannelColors[data.notificationChannel]}`}
            >
              {data.notificationChannel}
            </Tag>
          </div>
        </>
      ) : (
        <div className="my-1 flex items-center">
          <div>
            <HighlightedText>{data.notificationType}</HighlightedText>{' '}
            {translate('::Abp.Identity.ActivityLogs.SentNotification')}
          </div>

          <Tag
            prefix
            className="mx-1"
            prefixClass={`${NotificationChannelColors[data.notificationChannel]}`}
          >
            {data.notificationChannel}
          </Tag>

          <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