import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 { style, classes } from 'typestyle';
import { percent } from 'csx';
import PropTypes from 'prop-types';
import Card from '../CardWindow';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import NavigationRefresh from '@material-ui/icons/Refresh';
import NavigationFullscreen from '@material-ui/icons/Fullscreen';
import ActionSettings from '@material-ui/icons/Settings';
import OpenInBrowser from '@material-ui/icons/OpenInBrowser';
import DeviceDevices from '@material-ui/icons/Devices';
import ImagePhotoCamera from '@material-ui/icons/PhotoCamera';
import CardFloatingBar from '../CardFloatingBar';
import Monitor from './Monitor';
import ResolveProgress from './ResolveProgress';
import MapSelector from './MapSelector';
var frameSizes = [[480, 320], [640, 480], [720, 480], [800, 600], [1024, 768], [1136, 640], [1280, 720], [1280, 800], [1920, 1080]];
var by = 'x';

var getContainerStyle = function getContainerStyle(frameWidth, frameHeight) {
  return {
    paddingTop: percent(frameHeight / frameWidth * 100)
  };
};

var cn = {
  flexible: style({
    position: 'relative',
    width: '100%'
  }),
  popout: style({
    height: 8
  }),
  fullScreen: style({
    zIndex: 2000 // フルスクリーン時, CardFloatingBar より手前に来るように

  }),
  parent: style({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0
  }),
  blank: style({
    flex: 1
  })
};

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

  function MonitorCard() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, MonitorCard);

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

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

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
      frameWidth: 300,
      frameHeight: 150,
      containerStyle: getContainerStyle(300, 150),
      processing: false,
      statusLabel: null,
      anchorEl: null
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setStatusLabel", function (_ref) {
      var data = _ref.data;
      var value = data.value;
      if (typeof value !== 'string') throw new TypeError("Cannot make statusLabel ".concat(value));

      _this.setState({
        statusLabel: value
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleScreenShot",
    /*#__PURE__*/
    _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee() {
      var request;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!_this.state.processing) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              _this.setState({
                processing: true
              }); // Monitor にスクリーンショットを撮るようリクエスト


              request = {
                query: 'capture',
                type: 'image/jpeg',
                requestedBy: 'user-action' // ユーザーがリクエストしたことを表す

              };
              _context.next = 6;
              return _this.props.globalEvent.emitAsync('postMessage', request);

            case 6:
              // capture がおわったら, processing state を元に戻す
              _this.setState({
                processing: false
              });

            case 7:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, this);
    })));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSettings", function (event) {
      _this.setState({
        anchorEl: event.currentTarget
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleClose", function () {
      _this.setState({
        anchorEl: null
      });
    });

    return _this;
  }

  _createClass(MonitorCard, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      try {
        var frame = this.props.cardProps.MonitorCard.frame;

        if (frame && Array.isArray(frame.size)) {
          var _frame$size = _slicedToArray(frame.size, 2),
              frameWidth = _frame$size[0],
              frameHeight = _frame$size[1];

          this.changeSize(frameWidth, frameHeight);
        }
      } catch (e) {// continue regardless of error
      }

      this.props.globalEvent.on('message.statusLabel', this.setStatusLabel);
    }
  }, {
    key: "changeSize",
    value: function changeSize(frameWidth, frameHeight) {
      this.setState({
        frameWidth: frameWidth,
        frameHeight: frameHeight,
        containerStyle: getContainerStyle(frameWidth, frameHeight)
      });
    }
  }, {
    key: "renderMenuItem",
    value: function renderMenuItem(_ref3) {
      var _this2 = this;

      var _ref4 = _slicedToArray(_ref3, 2),
          w = _ref4[0],
          h = _ref4[1];

      var value = w + by + h;
      return React.createElement(MenuItem, {
        key: value,
        onClick: function onClick() {
          return _this2.changeSize(w, h);
        }
      }, value);
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var sizeValue = this.state.frameWidth + by + this.state.frameHeight;
      var _this$props = this.props,
          localization = _this$props.localization,
          showAll = _this$props.showAll,
          loadConfig = _this$props.loadConfig;
      var feelesrc = loadConfig('feelesrc');
      return React.createElement(Card, _extends({}, this.props.cardPropsBag, {
        flexBasis: this.props.isExpandingEditorCard ? '25%' : '50%'
      }), React.createElement(CardFloatingBar, null, React.createElement("span", null, this.props.localization.monitorCard.title), React.createElement("div", {
        className: cn.blank
      }), React.createElement(MapSelector, {
        selected: this.state.statusLabel || '',
        setLocation: this.props.setLocation,
        localization: this.props.localization
      }), React.createElement(IconButton, {
        disabled: true
      }, React.createElement(ResolveProgress, {
        size: 24,
        globalEvent: this.props.globalEvent
      })), React.createElement(IconButton, {
        color: "primary",
        disabled: feelesrc.disableReloadButton,
        onClick: function onClick() {
          return _this3.props.setLocation();
        }
      }, React.createElement(NavigationRefresh, null)), React.createElement(IconButton, {
        disabled: feelesrc.disableFullScreenButton,
        onClick: function onClick() {
          return _this3.props.toggleFullScreen();
        }
      }, React.createElement(NavigationFullscreen, null)), showAll ? React.createElement(IconButton, {
        tooltip: "screenshot",
        disabled: this.state.processing,
        onClick: this.handleScreenShot
      }, React.createElement(ImagePhotoCamera, null)) : null, showAll ? React.createElement(IconButton, {
        tooltip: "settings",
        onClick: this.handleSettings
      }, React.createElement(ActionSettings, null)) : null), React.createElement("div", {
        className: classes(cn.flexible, this.props.isPopout && cn.popout, this.props.isFullScreen && cn.fullScreen),
        style: this.props.isPopout ? undefined : this.state.containerStyle
      }, React.createElement("div", {
        className: cn.parent
      }, React.createElement(Monitor, {
        isPopout: this.props.isPopout,
        isFullScreen: this.props.isFullScreen,
        reboot: this.props.reboot,
        href: this.props.href,
        togglePopout: this.props.togglePopout,
        toggleFullScreen: this.props.toggleFullScreen,
        localization: this.props.localization,
        setLocation: this.props.setLocation,
        frameWidth: this.state.frameWidth,
        frameHeight: this.state.frameHeight,
        globalEvent: this.props.globalEvent
      }))), React.createElement(Menu, {
        anchorEl: this.state.anchorEl,
        open: !!this.state.anchorEl,
        onClose: this.handleClose
      }, React.createElement(MenuItem, {
        leftIcon: React.createElement(DeviceDevices, null),
        menuItems: frameSizes.map(this.renderMenuItem, this)
      }, sizeValue), React.createElement(MenuItem, {
        leftIcon: React.createElement(OpenInBrowser, null),
        onClick: function onClick() {
          return _this3.props.togglePopout();
        }
      }, localization.monitorCard.popout)));
    }
  }]);

  return MonitorCard;
}(PureComponent);

_defineProperty(MonitorCard, "propTypes", {
  cardPropsBag: PropTypes.object.isRequired,
  setLocation: PropTypes.func.isRequired,
  isPopout: PropTypes.bool.isRequired,
  togglePopout: PropTypes.func.isRequired,
  toggleFullScreen: PropTypes.func.isRequired,
  cardProps: PropTypes.object.isRequired,
  isFullScreen: PropTypes.bool.isRequired,
  reboot: PropTypes.bool.isRequired,
  href: PropTypes.string.isRequired,
  showAll: PropTypes.bool.isRequired,
  localization: PropTypes.object.isRequired,
  loadConfig: PropTypes.func.isRequired,
  globalEvent: PropTypes.object.isRequired,
  isExpandingEditorCard: PropTypes.bool.isRequired
});

export { MonitorCard as default };