"use strict";

exports.__esModule = true;
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

var _CardContent = _interopRequireDefault(require("@material-ui/core/CardContent"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _styles = require("@material-ui/core/styles");

var _SubFire512t = _interopRequireDefault(require("subfirelib/static/logos/SubFire-512t.png"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

/* eslint react/prop-types: 0 */
const styles = theme => ({
  mediaPortrait: {
    width: '100%',
    height: 'auto'
  },
  mediaLandscape: {
    height: '50%',
    width: 'auto',
    maxWidth: '100%'
  },
  card: {
    backgroundColor: '#37474F'
  },
  text: {
    color: '#FFF8E1'
  }
});

const Logo = props => /*#__PURE__*/_react.default.createElement("img", _extends({}, props, {
  src: _SubFire512t.default,
  alt: "",
  title: ""
}));

class MainContent extends _react.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "onResize", () => {
      const portrait = window.innerHeight >= window.innerWidth;
      this.setState({
        portrait: portrait
      });
    });

    const _portrait = window.innerHeight >= window.innerWidth;

    this.state = {
      portrait: _portrait
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this.onResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.onResize);
  }

  render() {
    const {
      classes
    } = this.props;
    const {
      portrait
    } = this.state;

    const title = /*#__PURE__*/_react.default.createElement(_Typography.default, {
      className: classes.text,
      gutterBottom: true,
      variant: "h5",
      component: "h2"
    }, "SubFire Mobile 3");

    const desc = /*#__PURE__*/_react.default.createElement(_Typography.default, {
      className: classes.text,
      component: "p"
    }, "Much like 2 but completely rewritten behind the scenes to using modern programming practices.");

    if (portrait) {
      return /*#__PURE__*/_react.default.createElement(_Grid.default, {
        container: true
      }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
        item: true,
        xs: 1,
        sm: 3
      }), /*#__PURE__*/_react.default.createElement(_Grid.default, {
        item: true,
        xs: 10,
        sm: 6
      }, /*#__PURE__*/_react.default.createElement(_Card.default, {
        className: classes.card,
        raised: true
      }, /*#__PURE__*/_react.default.createElement(Logo, {
        className: classes.mediaPortrait
      }), /*#__PURE__*/_react.default.createElement(_CardContent.default, null, title, desc))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
        item: true,
        xs: 1,
        sm: 3
      }));
    } else {
      return /*#__PURE__*/_react.default.createElement(_Grid.default, {
        container: true
      }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
        item: true,
        xs: 4
      }, /*#__PURE__*/_react.default.createElement(Logo, {
        className: classes.mediaLandscape
      })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
        item: true,
        xs: 8
      }, /*#__PURE__*/_react.default.createElement(_Card.default, {
        className: classes.card,
        raised: true
      }, /*#__PURE__*/_react.default.createElement(_CardContent.default, null, title, desc, /*#__PURE__*/_react.default.createElement(_Typography.default, {
        variant: "caption",
        className: classes.text,
        component: "p",
        style: {
          paddingTop: 35
        }
      }, "This application is intended to be used only in portrait mode.")))));
    }
  }

}

var _default = (0, _styles.withStyles)(styles)(MainContent);

exports.default = _default;