'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('./_commonjsHelpers-06173234.js');
require('./_to-object-329a650b.js');
require('./es6.string.iterator-cc0bbaa4.js');
require('./core.get-iterator-method-f62321d4.js');
require('./web.dom.iterable-a0e279c1.js');
var React = require('react');
var React__default = _interopDefault(React);
var main = require('./main-02daeefe.js');
var slicedToArray = require('./slicedToArray-8f385299.js');
require('./iconBase-68959171.js');
var index_esm = require('./index.esm-90433435.js');
var index_esm$3 = require('./index.esm-ff47db6f.js');

var Ustream = function Ustream(_ref) {
  var _ref$width = _ref.width,
      width = _ref$width === undefined ? '300px' : _ref$width,
      _ref$height = _ref.height,
      height = _ref$height === undefined ? '168px' : _ref$height,
      _ref$close = _ref.close,
      close = _ref$close === undefined ? false : _ref$close,
      _ref$right = _ref.right,
      right = _ref$right === undefined ? false : _ref$right,
      _ref$src = _ref.src,
      src = _ref$src === undefined ? 'https://video.ibm.com/embed/23627444?volume=0&autoplay=true' : _ref$src;

  var _useState = React.useState(width),
      _useState2 = slicedToArray._slicedToArray(_useState, 2),
      currentWidth = _useState2[0],
      setWidth = _useState2[1];

  var _useState3 = React.useState(height),
      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
      currentHeight = _useState4[0],
      setHeight = _useState4[1];

  var ustreamContainer = React.useRef(null);

  React.useEffect(function () {
    try {
      var container = document.getElementById('ustream-container');
      var ustream = document.getElementById('ustream-iframe');
      ustream.setAttribute('src', src);

      if (close) {
        var closeBtn = document.querySelector('.ustream-close');
        closeBtn.addEventListener('click', function () {
          container.remove();
        });
      } else {
        document.querySelector('.ustream-minimize').addEventListener('click', function (e) {
          container.style.position = 'static';
          container.style.padding = '0 1rem';
          container.classList.add('closed');
          setWidth('100%');
          // aspect ratio
          var newHeight = 9 / 16 * ustreamContainer.current.clientWidth;
          setHeight(newHeight);
          document.querySelector('.ustream-minimize').remove();
          var closeBtn = document.querySelector('.ustream-close');
          closeBtn.style.display = 'block';
          closeBtn.addEventListener('click', function () {
            container.remove();
          });
        });
      }
    } catch (err) {}
  }, []);
  //return nothing if mobile
  if (main.main_36) {
    return null;
  }
  return React__default.createElement(
    'div',
    { id: 'ustream-container', ref: ustreamContainer, style: { width: '' + currentWidth, marginBottom: '1rem' } },
    React__default.createElement(
      'div',
      { style: { position: 'relative' } },
      close ? React__default.createElement(
        'div',
        { className: 'ustream-close' },
        React__default.createElement(index_esm$3.FaRegWindowClose, { style: { color: '#fff', fontSize: '1.3rem' } })
      ) : React__default.createElement(
        React__default.Fragment,
        null,
        React__default.createElement(
          'div',
          { className: 'ustream-minimize' },
          React__default.createElement(index_esm.IoIosOpen, { style: right ? { color: '#fff', fontSize: '1.3rem', transform: 'rotateZ(-90deg)' } : { color: '#fff', fontSize: '1.3rem' } })
        ),
        React__default.createElement(
          'div',
          { className: 'ustream-close' },
          React__default.createElement(index_esm$3.FaRegWindowClose, { style: { color: '#fff', fontSize: '1rem' } })
        )
      ),
      React__default.createElement('iframe', { id: 'ustream-iframe', webkitallowfullscreen: 'true', allowFullScreen: true, frameBorder: 'no', style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
    ),
    React__default.createElement(
      'style',
      { jsx: 'true' },
      '\n        #ustream-container {\n          position: fixed;\n          bottom: 0;\n          ' + (right ? 'right: 1rem;' : 'left: 1.5rem;') + '\n          /* Updating z-index to fix gutter ad over ustream */\n          z-index: 999999;\n          max-width: 100%;\n        }\n        .ustream-minimize,\n        .ustream-close {\n          position: absolute;\n          color: white;\n          right: 0.5rem;\n          top: 0.25rem;\n          cursor: pointer;\n          font-weight: bold;\n        }\n        .ustream-close {\n          ' + (close ? 'display: block; right: .75rem; top: .5rem; ' : 'display: none; right: .5rem; top: .75rem;') + '\n        }\n        @media screen and (max-width: 768px) {\n          #ustream-container:not(.closed) {\n            width: 231px !important;\n            height: 130px !important;\n          }\n          #ustream-container:not(.closed) iframe {\n            height: 130px !important;\n          }\n        }\n      '
    )
  );
};

var Ustream$1 = React__default.memo(Ustream);

module.exports = Ustream$1;
