import React, { IframeHTMLAttributes, SyntheticEvent } from 'react';

export interface IVideo {
  autoPlay?: boolean;
  className?: string;
  controls?: boolean;
  controlsList?: string;
  id?: string;
  muted?: boolean;
  playsInline?: boolean;
  poster?: string;
  preload?: 'auto' | 'metadata' | 'none';
  src: string;
  height?: any;
  width?: any;
  style?: React.CSSProperties;
  onClick?(event: any): void;
  onLoadedData?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onCanPlay?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onEnded?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onError?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onLoadedMetadata?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onLoadStart?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onPause?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onPlay?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onPlaying?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onProgress?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onSeeked?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  onSeeking?(event: SyntheticEvent<HTMLVideoElement, Event>): void;
  [x: string]: any;
}

export const Video = React.forwardRef<any, IVideo>((props, ref) => {
  const {
    autoPlay,
    className = '',
    controls = true,
    controlsList,
    id,
    muted,
    playsInline,
    poster,
    preload,
    src,
    width = 1600,
    height = 900,
    style,
    onLoadedData,
    onCanPlay,
    onClick,
    onEnded,
    onError,
    onLoadedMetadata,
    onLoadStart,
    onPause,
    onPlay,
    onPlaying,
    onProgress,
    onSeeked,
    onSeeking,
    ...otherProps
  } = props;
  const spacerPaddingTop = `${(parseInt(height) / parseInt(width)) * 100}%`;

  if (src.includes('.mp4') || src.includes('.mov') || src.includes('base64')) {
    return (
      <div id={id} className={`b-video-container ${className}`} style={style} {...otherProps}>
        <div className="b-video-container-spacer" style={{ paddingTop: spacerPaddingTop }}></div>
        <video
          className="b-video"
          width={width}
          height={height}
          controls={controls}
          controlsList={controlsList}
          poster={poster}
          ref={ref}
          playsInline={playsInline}
          preload={preload}
          muted={muted}
          autoPlay={autoPlay}
          onClick={onClick}
          onLoadedData={onLoadedData}
          onCanPlay={onCanPlay}
          onEnded={onEnded}
          onError={onError}
          onLoadedMetadata={onLoadedMetadata}
          onLoadStart={onLoadStart}
          onPause={onPause}
          onPlay={onPlay}
          onPlaying={onPlaying}
          onProgress={onProgress}
          onSeeked={onSeeked}
          onSeeking={onSeeking}>
          <source src={src} type="video/mp4" />
        </video>
      </div>
    );
  } else {
    return (
      <div id={id} className={`b-video-container ${className}`} style={style} {...otherProps}>
        <div className="b-video-container-spacer" style={{ paddingTop: spacerPaddingTop }}></div>
        <iframe className="b-video" src={src} allowFullScreen ref={ref} width={width} height={height} onClick={onClick} />
      </div>
    );
  }
});