import React from "react";
import lbry from "lbry";
import VideoPlayer from "./internal/player";
import VideoPlayButton from "./internal/play-button";
import LoadingScreen from "./internal/loading-screen";
import NsfwOverlay from "component/nsfwOverlay";

class Video extends React.PureComponent {
  constructor(props) {
    super(props);
    // console.log("video view props", props);
    this.state = {
      showNsfwHelp: false,
      // videoPause: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log("VIDEO COMPONENT WILL RECIEVE NEXTPROPS:", nextProps);
    // this.setState({videoPause: nextProps.videoPause});
    // this.refs.media.children[0].pause();
  }

  componentWillUnmount() {
    this.props.cancelPlay();
  }

  isMediaSame(nextProps) {
    return (
      this.props.fileInfo &&
      nextProps.fileInfo &&
      this.props.fileInfo.outpoint === nextProps.fileInfo.outpoint
    );
  }

  handleMouseOver() {
    if (
      this.props.obscureNsfw &&
      this.props.metadata &&
      this.props.metadata.nsfw
    ) {
      this.setState({
        showNsfwHelp: true,
      });
    }
  }

  handleMouseOut() {
    if (this.state.showNsfwHelp) {
      this.setState({
        showNsfwHelp: false,
      });
    }
  }

  render() {
    const {
      metadata,
      isLoading,
      isDownloading,
      playingUri,
      fileInfo,
      contentType,
      changeVolume,
      volume,
      uri,
      videoPause,
    } = this.props;

    console.log("VIDEO VIEW videoPause:", videoPause);

    const isPlaying = playingUri === uri;
    const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
    const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
    const mediaType = lbry.getMediaType(
      contentType,
      fileInfo && fileInfo.file_name
    );

    let loadStatusMessage = "";

    if (fileInfo && fileInfo.completed && !fileInfo.written_bytes) {
      loadStatusMessage = __(
        "It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds."
      );
    } else if (isLoading) {
      loadStatusMessage = __("Requesting stream...");
    } else if (isDownloading) {
      loadStatusMessage = __("Downloading stream... not long left now!");
    }

    let klasses = [];
    klasses.push(obscureNsfw ? "video--obscured " : "");
    if (isLoading || isDownloading) klasses.push("video-embedded", "video");
    if (mediaType === "video") {
      klasses.push("video-embedded", "video");
      klasses.push(isPlaying ? "video--active" : "video--hidden");
    } else if (mediaType === "application") {
      klasses.push("video-embedded");
    } else {
      if (!isPlaying) klasses.push("video-embedded");
    }
    const poster = metadata.thumbnail;

    return (
      <div>
        <p>videoPause: {videoPause}</p>
        <div
          className={klasses.join(" ")}
          onMouseEnter={this.handleMouseOver.bind(this)}
          onMouseLeave={this.handleMouseOut.bind(this)}
        >
          {isPlaying &&
            (!isReadyToPlay ? (
              <LoadingScreen status={loadStatusMessage} />
            ) : (
              <VideoPlayer
                filename={fileInfo.file_name}
                poster={poster}
                downloadPath={fileInfo.download_path}
                mediaType={mediaType}
                contentType={contentType}
                downloadCompleted={fileInfo.completed}
                changeVolume={changeVolume}
                volume={volume}
              />
            ))}
          {!isPlaying && (
            <div
              className="video__cover"
              style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
            >
              <VideoPlayButton {...this.props} mediaType={mediaType} />
            </div>
          )}
          {this.state.showNsfwHelp && <NsfwOverlay />}
        </div>
      </div>
    );
  }
}

export default Video;
