import React from "react";
import ReactPlayer from "react-player";

export class VideoContent extends React.Component {
  componentWillUpdate(nextProps) {
    if (this.rp.player) {
    }
  }

  render() {
    const { settings, muted, controls } = this.props;

    const videoStyle = {
      maxWidth: "100%",
      maxHeight: "100%",
      width: "100%",
      height: "100%"
    };

    const padding = settings.properties ? settings.properties.padding : 0;

    const properties = settings.hasOwnProperty("properties")
      ? settings.properties
      : false;

    return (
      <div style={{ padding }}>
        <div style={{ ...properties, marginTop: 0, padding: 0 }}>
          <ReactPlayer
            url={settings.src.mp4}
            style={videoStyle}
            width="100%"
            height="100%"
            muted={muted}
            controls={controls}
            ref={rp => (this.rp = rp)}
          />
        </div>
      </div>
    );
  }
}

VideoContent.defaultProps = {
  muted: false,
  controls: false,
};

const Video = props => {
  const { settings } = props;
  const marginTop = settings.properties ? settings.properties.marginTop : 0;
  const textAlign = settings.properties
    ? settings.properties.textAlign
    : "inherit";

  return (
    <div style={{ marginTop, textAlign }}>
      <VideoContent {...props} muted={false} controls />
    </div>
  );
};

export default Video;