import React, { useEffect, useRef, useState } from 'react'
import Placeholder from '../Placeholder/Placeholder'
import { theme } from 'theme'
import Box from '../Box'

export const Iframe = ({ width, height, ...props }) => {
  const iframeRef = useRef(null)
  const [isMounted, setMounted] = useState(false)
  const [prevSrc, setPrevSrc] = useState(props.src)

  if (props.src !== prevSrc) {
    setPrevSrc(props.src)
    setMounted(false)
  }

  useEffect(() => {
    if (iframeRef.current) {
      setMounted(true)
    }
  }, [prevSrc])

  return (
    <Box position='relative' css={theme({ width, height })}>
      {!isMounted && (
        <Box position='absolute' inset={0} zIndex={1}>
          <Placeholder width={width} height={height} />
        </Box>
      )}

      <Box
        as='iframe'
        ref={iframeRef}
        target='_parent'
        css={theme({ width, height })}
        style={{
          opacity: isMounted ? 1 : 0,
          pointerEvents: isMounted ? 'auto' : 'none',
          aspectRatio: '16 / 9',
          border: 'none'
        }}
        {...props}
      />
    </Box>
  )
}
