import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-b4dfe691.js';
import { _ as _slicedToArray } from './slicedToArray-ca2c8b8d.js';
import React, { useState, useRef, useEffect } from 'react';
import { c as IoIosOpen } from './index.esm-3fdda599.js';
import { F as FaRegWindowClose } from './index.esm-a8ff922c.js';
import { m as main_43 } from './main-b5c5aac1.js';
import './_commonjsHelpers-0c4b6f40.js';
import './core.get-iterator-method-e903ff31.js';
import './web.dom.iterable-fdf034f5.js';
import './_library-528f1934.js';
import './_iter-detect-f089461c.js';
import './iconBase-602d52fe.js';

var _this = undefined;

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,
      _ref$logEvent = _ref.logEvent,
      logEvent = _ref$logEvent === undefined ? function () {} : _ref$logEvent;

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

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

  var _useState5 = useState(true),
      _useState6 = _slicedToArray(_useState5, 2),
      isMuted = _useState6[0],
      setIsMuted = _useState6[1];

  var ustreamContainer = useRef(null);

  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) {}
  }, []);

  useEffect(function () {

    if (isMuted) {
      var loadUstreamListener = function () {
        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
          var UstreamEmbed, viewer, reporting;
          return regenerator.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _context.next = 2;
                  return import('./ustream-api-41166338.js');

                case 2:
                  UstreamEmbed = _context.sent;
                  viewer = UstreamEmbed('ustream-iframe');
                  reporting = setInterval(function () {
                    viewer.getProperty('volume', function (content) {
                      if (content > 0) {
                        logEvent({ category: 'Ustream Unmute', action: 'Unmute Ustream Widget', label: 'Unmute Ustream Widget' });
                        setIsMuted(false);
                        clearInterval(reporting);
                      }
                    });
                  }, 2000);

                case 5:
                case 'end':
                  return _context.stop();
              }
            }
          }, _callee, _this);
        }));

        return function loadUstreamListener() {
          return _ref2.apply(this, arguments);
        };
      }();
      loadUstreamListener();
    }
  }, [isMuted]);
  //return nothing if mobile
  if (main_43) {
    return null;
  }
  return React.createElement(
    'div',
    { id: 'ustream-container', ref: ustreamContainer, style: { width: '' + currentWidth, marginBottom: '1rem' } },
    React.createElement(
      'div',
      { style: { position: 'relative' } },
      close ? React.createElement(
        'div',
        { className: 'ustream-close' },
        React.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1.3rem' } })
      ) : React.createElement(
        React.Fragment,
        null,
        React.createElement(
          'div',
          { className: 'ustream-minimize' },
          React.createElement(IoIosOpen, { style: right ? { color: '#fff', fontSize: '1.3rem', transform: 'rotateZ(-90deg)' } : { color: '#fff', fontSize: '1.3rem' } })
        ),
        React.createElement(
          'div',
          { className: 'ustream-close' },
          React.createElement(FaRegWindowClose, { style: { color: '#fff', fontSize: '1rem' } })
        )
      ),
      React.createElement('iframe', { id: 'ustream-iframe', webkitallowfullscreen: 'true', allowFullScreen: true, frameBorder: 'no', style: { maxWidth: '100%', height: currentHeight, width: currentWidth } })
    ),
    React.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.memo(Ustream);

export default Ustream$1;
