import React, { useRef } from 'react'
import {
  StyledVideo,
  StyledVideoMask,
  StyledVideoPlay
} from './VideoEmbed.theme'

import { IVideoEmbed } from './VideoEmbed.interface'

const VideoEmbed = ({
  embed,
  poster,
  autoplay,
  controls,
  loop,
  muted,
  playsInline,
  className,
  style,
  ...props
}: IVideoEmbed) => {
  const maskRef: any = useRef()

  const framed: boolean = false
  let videoId: any = []
  let thumb: string = poster || ''
  let embedElement: string = ''

  if (embed && !framed) {
    if (embed.indexOf('/watch?v=') !== -1) {
      videoId = embed.split('/watch?v=')
      videoId = videoId[videoId.length - 1]
      if (embed.indexOf('&') !== -1) {
        videoId = videoId.split('&')
        videoId = videoId[0]
      }
    } else if (embed.indexOf('/') !== -1) {
      videoId = embed.split('/')
      videoId = videoId[videoId.length - 1]
      if (embed.indexOf('?') !== -1) {
        videoId = videoId.split('?')
        videoId = videoId[0]
      }
    }

    const videoAttrs = `autoPlay=${autoplay}&controls=${controls}&loop=${loop}&muted=${muted}&playsInline=${playsInline}`

    if (embed.indexOf('youtube') >= 0) {
      embedElement = `https://www.youtube.com/embed/${videoId}?${videoAttrs}&enablejsapi=1`

      if (!poster) {
        thumb = `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`
      }
    } else if (embed.indexOf('vimeo') >= 0) {
      embedElement = `https://player.vimeo.com/video/${videoId}?${videoAttrs}`

      if (!poster) {
        thumb = `https://i.vimeocdn.com/video/${videoId}_640.jpg`
      }
    }
  }

  const setFramed = () => {
    const iframe = document.createElement('iframe')

    iframe.setAttribute('frameborder', '0')
    iframe.setAttribute('allow', 'fullscreen; autoplay')
    iframe.setAttribute('allowfullscreen', '1')

    iframe.setAttribute('src', embedElement)

    maskRef.current.replaceWith(iframe)

    setTimeout(() => {
      iframe?.contentWindow?.postMessage(
        '{"event":"command","func":"playVideo","args":""}',
        '*'
      )
    }, 500)
  }

  return (
    <StyledVideo className={className} style={style}>
      <StyledVideoMask
        ref={maskRef}
        style={{ backgroundImage: `url(${thumb})` }}
        onClick={() => {
          setFramed()
        }}
      >
        <StyledVideoPlay>
          <svg
            viewBox="0 0 62 72"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M1.30184 71.661C1.70029 71.8869 2.1419 72 2.58334 72C3.03735 72.0002 3.49152 71.8797 3.89774 71.6435L60.7311 38.2131C61.5182 37.7486 62 36.9073 62 35.9982C62 35.0891 61.5182 34.2478 60.7311 33.7832L3.89774 0.352633C3.10067 -0.109486 2.11412 -0.119525 1.30184 0.335024C0.496993 0.792041 0 1.64337 0 2.56761V69.4284C0 70.3526 0.496993 71.204 1.30184 71.661ZM5 65V7L54 36.0001L5 65Z"
            />
          </svg>
        </StyledVideoPlay>
      </StyledVideoMask>
    </StyledVideo>
  )
}

export default VideoEmbed