import React from "react";
import { get } from "lodash";
import ReactPlayer from "react-player";
import Icon, { IconTypes } from "@sc/plugins/webcomponents/v2/Icon";
import reducers from "@sc/plugins/webcomponents/v2/Button/reducers";

export class VideoContent extends React.Component {
  constructor(props) {
    super(props);
    this.handleProgress = this.handleProgress.bind(this);
    this.state = {
      triggeredYet: false,
    };
  }

  // componentWillUpdate(nextProps) {
  //   if (this.rp.player) {
  //   }
  // }

  handleProgress(e) {
    const {
      settings,
      getComponentSettings,
      updateComponentSettings,
    } = this.props;
    const { actions, triggerAfter = 0 } = settings;
    console.log(e.playedSeconds);
    if (actions && e.playedSeconds > triggerAfter && !this.state.triggeredYet) {
      const doTheseActions = actions.filter(
        (itm) => itm.behavior === "playProgress"
      );

      this.setState({ triggerYet: true }, () => {
        doTheseActions.forEach((action) =>
          reducers([], {
            ...action,
            settings,
            updateComponentSettings,
            getComponentSettings,
          })
        );
      });
    }
  }

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

    const videoStyle = {
      maxWidth: "100%",
      maxHeight: "100%",
      width: "100%",
      height: "100%",
      position: "absolute",
      top: 0,
      left: 0,
    };

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

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

    const playIconStyle = {
      color: "white",
      fontSize: "72pt",
      position: "absolute",
      transform: `translate(-50%, -50%)`,
    };

    return (
      <div style={{ padding }}>
        <div
          style={{
            ...properties,
            maxWidth: "100%",
            marginTop: 0,
            padding: 0,
            position: "relative",
            paddingTop: `${100 / (1280 / 720)}%`,
          }}
        >
          <ReactPlayer
            url={settings.src.mp4}
            style={videoStyle}
            light={get(settings, "properties.backgroundImage", "")
              .replace("url(", "")
              .replace(")", "")}
            width="100%"
            height="100%"
            muted={muted}
            controls={controls}
            ref={(rp) => (this.rp = rp)}
            onProgress={this.handleProgress}
            playIcon={
              <div>
                <Icon
                  type={IconTypes.PlayCircleOutline}
                  style={{
                    ...playIconStyle,
                    ...get(settings, "playIconStyle", {}),
                    color: `rgb(0,0,0,0.5)`,
                    margin: "1px 0 0 1px",
                  }}
                />
                <Icon
                  type={IconTypes.PlayCircleOutline}
                  style={{
                    ...playIconStyle,
                    ...get(settings, "playIconStyle", {}),
                  }}
                />
              </div>
            }
          />
        </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;