import { textFromRenderedContent } from '@/utils'
import type { ActionLog } from '@inject/graphql/fragment-types'
import type { FC } from 'react'
import useFormatTimestamp from '../useFormatTimestamp'

const getContent = (actionLog: ActionLog) => {
  const { details } = actionLog
  switch (details.__typename) {
    case 'InjectDetailsType':
      return (
        <>
          {details.inject.organization && (
            <>
              <strong>Organization: </strong>
              <span>{details.inject.organization}</span>
              <br />
            </>
          )}
          <strong>Content: </strong>
          <span>{textFromRenderedContent(details.content.rendered)}</span>
        </>
      )
    case 'CustomInjectDetailsType':
      return (
        <>
          <strong>Content: </strong>
          <span>{textFromRenderedContent(details.content.rendered)}</span>
        </>
      )
    case 'ToolDetailsType':
      return (
        <>
          <strong>Tool: </strong>
          <span>{details.tool.name}</span>
          <br />
          {details.tool.requiresInput && (
            <>
              <strong>Argument: </strong>
              <span>{details.argument}</span>
              <br />
            </>
          )}
          <strong>Response: </strong>
          <span>{textFromRenderedContent(details.content.rendered)}</span>
        </>
      )
    case 'TeamQuestionnaireStateType':
      return (
        <>
          <strong>Title: </strong>
          <span>{details.questionnaire.title}</span>
        </>
      )
    case 'EmailType':
      return (
        <>
          <strong>Sender: </strong>
          <span>{details.sender.address}</span>
          <br />
          <strong>Subject: </strong>
          <span>{details.thread.subject}</span>
          <br />
          <strong>Content: </strong>
          <span>{textFromRenderedContent(details.content.rendered)}</span>
        </>
      )
    default:
      throw new Error(`unknown actionLog type: ${actionLog.type}`)
  }
}

interface ActionTooltipProps {
  actionLog: ActionLog
}

const ActionTooltip: FC<ActionTooltipProps> = ({ actionLog }) => {
  const formatTimestamp = useFormatTimestamp()

  return (
    <>
      <strong>Type: </strong>
      <span>{actionLog.type}</span>
      <br />
      {getContent(actionLog)}
      <br />
      <strong>Timestamp: </strong>
      <span>{formatTimestamp(actionLog.timestamp)}</span>

      <br />
      <strong>Channel: </strong>
      <span>{actionLog.channel.displayName}</span>
      <br />
    </>
  )
}

export default ActionTooltip
