import * as classNames from "classnames";
import * as React from "react";
import Player from "react-player";

export interface IVideoProps {
  src: string;
  style?: object;
  className?: string;
  onStart?: () => void;
  /**
   * Called when the full video has finished playing
   */
  onEnd?: () => void;
  asPlayButton?: boolean;
}

export class Video extends React.Component<IVideoProps, {}> {
  public render() {
    return (
      <div
        className={classNames("video", {
          "video--as-play-button": this.props.asPlayButton,
          [this.props.className]: this.props.className,
        })}
        {...this.props.style && { style: this.props.style }}
      >
        <Player
          light={this.props.asPlayButton}
          className="video__player"
          url={this.props.src}
          width="100%"
          height="100%"
          vimeoConfig={{
            preload: true,
            // @ts-ignore
            responsive: true,
          }}
          {...this.props.onStart && { onStart: this.props.onStart }}
          {...this.props.onEnd && { onEnded: this.props.onEnd }}
        />
      </div>
    );
  }
}