import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { SrcDocEnabled } from './setSrcDoc';
import ErrorMessage from './ErrorMessage';
var Padding = 1;
var ScaleChangeMin = 0.02;

var Screen =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(Screen, _PureComponent);

  function Screen() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, Screen);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Screen)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      loading: false
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_scale", 0);

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleUpdate", function () {
      var _this$props = _this.props,
          width = _this$props.width,
          height = _this$props.height;

      if (_this.iframe && _this.iframe.parentNode && _this.iframe.parentNode.parentNode) {
        var rect = _this.iframe.parentNode.getBoundingClientRect();

        var containerWidth = Math.max(0, rect.width - Padding);
        var containerHeight = Math.max(0, rect.height - Padding);
        var scale = containerHeight / containerWidth > height / width ? containerWidth / width : containerHeight / height;

        if (Math.abs(_this._scale - scale) >= ScaleChangeMin) {
          _this.iframe.style.transform = "scale(".concat(scale, ")");
          _this._scale = scale;
        }
      }

      if (_this.iframe) {
        requestAnimationFrame(_this.handleUpdate);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFrame", function (ref) {
      _this.iframe = ref;

      _this.props.frameRef(ref);

      _this._scale = 0;

      if (_this.iframe) {
        requestAnimationFrame(_this.handleUpdate);
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClickReload", function (event) {
      _this.props.setLocation();

      event.stopPropagation();
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClickExit", function (event) {
      _this.props.toggleFullScreen();

      event.stopPropagation();
    });

    return _this;
  }

  _createClass(Screen, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var _this2 = this;

      if (prevProps.reboot !== this.props.reboot) {
        if (!this.props.reboot) {
          this.setState({
            loading: true
          }, function () {
            setTimeout(function () {
              _this2.setState({
                loading: false
              });
            }, 250);
          });
        }
      }

      if (this.iframe) {
        this.iframe.width = "".concat(this.props.width, "px");
        this.iframe.height = "".concat(this.props.height, "px");
      }
    }
  }, {
    key: "render",
    value: function render() {
      var display = this.props.display;
      var loading = this.state.loading;
      var sandbox = SrcDocEnabled ? 'allow-scripts allow-modals allow-popups' : 'allow-scripts allow-modals allow-popups allow-same-origin'; // Screen は Popout されることもあるので, CSS の class は使えない

      var styles = {
        root: {
          position: 'absolute',
          width: '100%',
          height: '100%',
          left: 0,
          top: 0,
          background: 'linear-gradient(rgba(0,0,0,0.8), rgba(128,128,128,0.8))',
          boxSizing: 'border-box',
          overflow: 'hidden',
          zIndex: 10,
          display: display ? 'flex' : 'none',
          flexDirection: 'column',
          alignItems: 'stretch'
        },
        parent: {
          flex: 1,
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        },
        frame: {
          border: '0 none',
          flex: '0 0 auto',
          opacity: loading ? 0 : 1,
          transition: loading ? 'none' : 'opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms'
        },
        button: {
          cursor: 'pointer',
          height: '10vh'
        }
      };
      return React.createElement("div", {
        style: styles.root
      }, React.createElement(ErrorMessage, {
        error: this.props.error
      }), React.createElement("div", {
        style: styles.parent
      }, this.props.reboot ? null : React.createElement("iframe", {
        sandbox: sandbox,
        style: styles.frame,
        ref: this.handleFrame,
        width: this.props.width,
        height: this.props.height
      })), React.createElement("div", {
        style: {
          flex: 0
        }
      }, this.props.setLocation ? React.createElement("svg", {
        fill: "white",
        style: styles.button,
        viewBox: "0 0 24 24",
        onClick: this.handleClickReload
      }, React.createElement("path", {
        d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
      })) : null, this.props.toggleFullScreen ? React.createElement("svg", {
        fill: "white",
        style: styles.button,
        viewBox: "0 0 24 24",
        onClick: this.handleClickExit
      }, React.createElement("path", {
        d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
      })) : null));
    }
  }]);

  return Screen;
}(PureComponent);

_defineProperty(Screen, "propTypes", {
  reboot: PropTypes.bool.isRequired,
  animation: PropTypes.bool.isRequired,
  display: PropTypes.bool.isRequired,
  frameRef: PropTypes.func.isRequired,
  setLocation: PropTypes.func,
  toggleFullScreen: PropTypes.func,
  error: PropTypes.object,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  isFullScreen: PropTypes.bool.isRequired
});

_defineProperty(Screen, "defaultProps", {
  animation: false,
  display: false,
  error: null,
  isFullScreen: false
});

export { Screen as default };