import { Image } from '@siteone/react-img-microservice'
import { styled } from '@siteone/system-core'
import React, {useContext} from 'react'
import Lottie from 'react-lottie-player/dist/LottiePlayerLight'
import Context from '../EventsContext'

const IMAGE_SIZE = 125

const ImageContainer = styled.div`
  height: ${IMAGE_SIZE}px;
  width: ${IMAGE_SIZE}px;
  background-size: cover;
  background-position: center;
  background-color: #eaf7ff;
  background-image: url(${({ url }) => url});
`

const DefaultMediaItem = ({ url, alt }) => {
  const ctx = useContext(Context)
  const isLottie = url.includes('.json')
  // If we have Image Provider
  // If it is not svg

  if (isLottie) {
    return (
      <Lottie
        path={url}
        style={{ width: IMAGE_SIZE, height: IMAGE_SIZE }}
        play
      />
    )
  }

  if (ctx && ctx.imageProvider && ctx.imageProvider.url && !url.includes('.svg')) {
    return (
      <Image src={url} width={IMAGE_SIZE} height={IMAGE_SIZE} />
    )
  }

  // Otherwise use normal component
  return (
    <ImageContainer title={alt} url={url} />
  )
}

export default DefaultMediaItem