import React from 'react'
import { ClipTag } from '../components'
import { ContentProps } from '../../../types'
import { ContentLayout } from '../../../ContentLayout'
import type * as ComponentWorkarounds from '../../Workarounds'

type Preset = 'full-player' | 'thumbnail'

export interface ClipProps extends ContentProps<ComponentWorkarounds.ClipSet> {
  preload?: string
  preset?: Preset
  maxClipWidth?: number
}

const ClipComponent: React.FC<ClipProps> = ({
  content,
  preset = 'full-player',
  preload = 'auto',
  maxClipWidth = 0,
}) => {
  const clip = content?.clips?.length ? content?.clips[0] : null
  if (!clip) {
    return null
  }

  const id: string = 'id' in content ? content.id : ''
  const poster: string = content.autoplay ? '' : clip.poster || ''

  const noAudio = content.noAudio ?? false
  const accessibility = content.accessibility ?? {}
  const systemTitle = content.systemTitle ?? ''
  // TODO CI-3354: dataLayout is deprecated, this property will be layoutWidth when we no longer use bodyXML
  const layout = content.layoutWidth ?? content.dataLayout ?? 'in-line'

  if (preset === 'thumbnail') {
    return (
      <ClipTag
        id={id}
        clip={clip}
        poster={poster}
        accessibility={accessibility}
        autoplay={content.autoplay}
        loop={content.loop}
        noAudio={noAudio}
        muted={content.muted}
        preload={preload}
        noCaption
        noDescription
        noInfoBox
        systemTitle={systemTitle}
        maxClipWidth={maxClipWidth}
      />
    )
  }

  return (
    <ContentLayout dataLayout={layout} dataComponent="clip-set">
      <ClipTag
        id={id}
        layoutWidth={layout}
        description={content.description ?? ''}
        poster={poster}
        autoplay={content.autoplay}
        noAudio={noAudio}
        loop={content.loop}
        muted={content.muted}
        clip={clip}
        credits={content.credits ?? ''}
        caption={content.caption ?? ''}
        systemTitle={systemTitle}
        accessibility={accessibility}
        preload={preload}
        dataTrackable="next-article-cp-clip"
        maxClipWidth={maxClipWidth}
        fragmentIdentifier={content.fragmentIdentifier ?? ''}
      />
    </ContentLayout>
  )
}

export default ClipComponent