"use strict";

var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = __importDefault(require("react"));

const exotic_1 = require("exotic");

const mobx_react_1 = require("xmobx/mobx-react");

const QuestionIcon_1 = __importDefault(require("../../atoms/Icons/QuestionIcon"));

const PlayIcon_1 = __importDefault(require("../../atoms/Icons/PlayIcon"));

const words_1 = require("../../../words");

const styled_1 = require("./styled");
/**
 * @todo !!! NEEDS A PAUSE ICON, OR MORPH THE PLAY ICON INTO PAUSE
 * @todo later - this is the actual controls, the other is VideoFlare
 */


class ActualVideoControls extends react_1.default.PureComponent {
  render() {
    const {
      state
    } = this.props;
    const handleClick = state.toggleIsPlaying;
    const icon = react_1.default.createElement(PlayIcon_1.default, {
      type: "large"
    });
    console.debug('[Video] ActualVideoControls: render');
    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(styled_1.PlayButton, {
      children: icon,
      onClick: handleClick,
      "aria-label": words_1.wording.playButton
    }));
  }

}

let VideoControls = class VideoControls extends react_1.default.Component {
  render() {
    const {
      state,
      title,
      slogan,
      shareTitle,
      videoLength
    } = this.props;
    console.debug('[Video] controls: render'); // this 1 line is the one that will change when the state changes

    return state.isPlaying ? '' : react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(styled_1.VideoLogoPanel, null, react_1.default.createElement(styled_1.VideoWidgetLogo, null), react_1.default.createElement(styled_1.VideoTitle, null, title), react_1.default.createElement(styled_1.VideoSlogan, null, slogan)), react_1.default.createElement(styled_1.VideoShareWrap, null, react_1.default.createElement(styled_1.VideoShareText, null, shareTitle), react_1.default.createElement(QuestionIcon_1.default, null)), react_1.default.createElement(ActualVideoControls, {
      state: state
    }), react_1.default.createElement(styled_1.VideoTimerWrap, null, react_1.default.createElement(PlayIcon_1.default, {
      type: "small"
    }), react_1.default.createElement(styled_1.VideoTimerText, null, videoLength)));
  }

};
VideoControls.defaultProps = {
  state: exotic_1.EMPTY_OBJ
};
VideoControls = __decorate([mobx_react_1.observer], VideoControls);
exports.VideoControls = VideoControls;
exports.default = VideoControls; //# sourceMappingURL=VideoControls.js.map