"use strict";

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

const tslib_1 = require("tslib");

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

const exotic_1 = require("exotic");

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

const Empty_1 = require("../../atoms/Empty");

const MaterialIcon_1 = require("../../atoms/MaterialIcon");

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

const styled_1 = require("./styled");

const LargeWhiteIcon = MaterialIcon_1.styledMaterialIcon(48, 'white');
const LargeLiteIcon = MaterialIcon_1.styledMaterialIcon(48, 'white', 0.7);
const SmallLiteIcon = MaterialIcon_1.styledMaterialIcon(24, 'white', 0.7);
/**
 * @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(LargeLiteIcon, {
      type: "play"
    });
    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');

    const videoControlsView = () => {
      return state.shouldAutoPlay ? react_1.default.createElement(Empty_1.Empty, null) : 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(LargeWhiteIcon, {
        type: "share"
      })), react_1.default.createElement(ActualVideoControls, {
        state: state
      }), react_1.default.createElement(styled_1.VideoTimerWrap, null, react_1.default.createElement(SmallLiteIcon, {
        type: "play"
      }), react_1.default.createElement(styled_1.VideoTimerText, null, videoLength)));
    }; // this 1 line is the one that will change when the state changes


    return state.isPlaying ? '' : videoControlsView();
  }

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