import type { MessageVideo } from 'domains/store/store.types'
import { useTranslatedEventData } from 'domains/translations/hooks'
import { className } from 'lib/css'
import { FC } from 'preact/compat'
import MessageContainer from 'ui/components/conversation/message-container'
import { useSeamlyMessageContainerClassNames } from 'ui/hooks/seamly-hooks'

type VideoProps = {
  event: MessageVideo
  descriptorId?: string
}

const Video: FC<VideoProps> = ({ event, descriptorId, ...props }) => {
  const { body } = useTranslatedEventData(event)

  const classNames = useSeamlyMessageContainerClassNames(event)

  classNames.push('message--type-video')

  return (
    <MessageContainer event={event} type="video" {...props}>
      <div id={descriptorId} className={className('visually-hidden')}>
        {body?.description}
      </div>
      <iframe
        title={body?.description || ''}
        src={body?.url}
        allow="autoplay; encrypted-media"
        allowFullScreen
      />
    </MessageContainer>
  )
}

export default Video