import React, { Component } from 'react';
import { Text } from '@rebass/emotion';

import { fontSizes, lineHeights, space, BREAKPOINT_VALUES } from 'utils/theme';
import typography from 'utils/typography';

import { VideoModuleProps } from './video-module.types';
import { FluidContainer } from 'utils/styles/mixins';

import * as Styles from './video-module.styles';

class VideoModule extends Component<VideoModuleProps> {

  renderCopy = (title: string, copy: string) => {
    return (
      <>
      { title &&
        <Text
          mb={!copy && [space.xsmall, space.small]}
          width='100%'
          textAlign='left'
          fontWeight='bold'
          fontSize={[fontSizes.xxLarge, fontSizes.xxxLarge]}
          lineHeight={[lineHeights.xxxLarge]}
          fontFamily={typography.options.headerFontFamily!.join()}>
          {title}
        </Text>
      }
      { copy &&
        <Text
          mt={title ? [space.xsmall, space.small] : []}
          mb={[space.xsmall, space.small]}
          fontWeight='normal'
          fontSize={[fontSizes.small, fontSizes.base]}
          lineHeight={[lineHeights.xLarge]}
          fontFamily={typography.options.bodyFontFamily!.join()}>
          {copy}
        </Text>
      }
      </>
    )
  }

  renderVideoPlayer = (url: string, loop: boolean): JSX.Element | null => {
    const isVimeo = url.indexOf('vimeo') > -1
    const urlSplit = url.split('/');
    const videoId = urlSplit[urlSplit.length - 1]
    return isVimeo ? (
      <Styles.IFrame
        src={`https://player.vimeo.com/video/${videoId}?${loop ? 'background=1' : 'byline=false&title=false&autoplay=false'}`}
        frameBorder="0"
        allow="autoplay; fullscreen allowfullscreen">
      </Styles.IFrame>
    ) : null
  }

  render() {
    
    const { data: { video: { url }, title, copy, loop } } = this.props
    const screenWidth = (typeof window !== 'undefined' && window !== null) ? window.innerWidth : BREAKPOINT_VALUES.MEDIUM; 
    const isWindowAvailable: boolean = (typeof window !== 'undefined' && window !== null);
    const video: JSX.Element | null = this.renderVideoPlayer(url, loop);

    const videoContent = isWindowAvailable ? (
      <Styles.VideoContainer width={screenWidth} height={0.56 * screenWidth}>
        {video}
      </Styles.VideoContainer>
    ) : (
      <Styles.FallBackVideoContainer>
        {video}
      </Styles.FallBackVideoContainer>
    );

    return (
      <FluidContainer>
        <Styles.Module>
          <Styles.TextContainer>
            {(title || copy) && this.renderCopy(title, copy)}
          </Styles.TextContainer>
          {videoContent}
        </Styles.Module>
      </FluidContainer>
    )
  }
}

export default VideoModule