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

import { IVideo } from './Video.interface'

const Video = ({
  src,
  poster,
  autoplay,
  controls,
  loop,
  muted,
  playsInline,
  className,
  style,
  ...props
}: IVideo) => {
  const maskRef: any = useRef()
  const videoRef: any = useRef()
  let isPlaying: boolean = false

  const setFramed = () => {
    const video = document.createElement('video')
    const source = document.createElement('source')

    autoplay && video.setAttribute('autoPlay', '')
    controls && video.setAttribute('controls', '')
    loop && video.setAttribute('loop', '')
    muted && video.setAttribute('muted', '')
    playsInline && video.setAttribute('playsInline', '')

    source.setAttribute('src', src || '')
    source.setAttribute('type', 'video/mp4')

    video.appendChild(source)
    video.pause()

    video.onplaying = function () {
      isPlaying = true
    }
    video.onpause = function () {
      isPlaying = false
    }

    maskRef.current.replaceWith(video)

    let observerObj = new IntersectionObserver(
      (entries, observer) => {
        const element: any = entries[0].target
        if (entries[0].isIntersecting) {
          if (
            element.paused &&
            !isPlaying &&
            element.getAttribute('autoplay') != undefined
          ) {
            element.muted = true
            element.play()
          }
        } else {
          if (!element.paused && isPlaying) {
            element.pause()
          }
        }
      },
      {
        rootMargin: '0px',
        threshold: 0.3
      }
    )

    setTimeout(() => {
      observerObj.observe(video)
    }, 500)
  }

  return (
    <StyledVideo className={className} style={style}>
      <StyledVideoMask
        ref={maskRef}
        style={{ backgroundImage: `url(${poster})` }}
        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 Video