import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import { useEffect } from 'preact/hooks'
import { useLiveRegion, useSeamlyCurrentAgent } from 'ui/hooks/seamly-hooks'
import EventParticipant from './event/event-participant'

const Loader = () => {
  const { t } = useI18n()
  const { sendPolite } = useLiveRegion()
  const { id, name } = useSeamlyCurrentAgent() || {}

  useEffect(() => {
    if (name) {
      sendPolite(t('typing.srText', { name }))
    }
  }, [name, sendPolite, t])

  return (
    <li
      className={className(
        'conversation__item',
        'conversation__item--source-agent',
      )}
    >
      <div
        className={className(
          'message',
          'message--source-agent',
          'message--type-loading',
        )}
      >
        <EventParticipant
          eventPayload={{
            fromClient: false,
            participant: id,
          }}
        />
        <div className={className('message__body')}>
          <span className={className('loader')}>
            <span className={className('loader__part', 'one')} />
            <span className={className('loader__part', 'two')} />
            <span className={className('loader__part', 'three')} />
            <span className={className('loader__part', 'four')} />
          </span>
        </div>
      </div>
    </li>
  )
}

export default Loader