"use strict";

require("core-js/modules/es.symbol.js");
require("core-js/modules/es.array.filter.js");
require("core-js/modules/es.array.for-each.js");
require("core-js/modules/es.array.push.js");
require("core-js/modules/es.object.define-properties.js");
require("core-js/modules/es.object.define-property.js");
require("core-js/modules/es.object.get-own-property-descriptor.js");
require("core-js/modules/es.object.get-own-property-descriptors.js");
require("core-js/modules/es.object.keys.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.for-each.js");
require("core-js/modules/web.dom-collections.for-each.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.View = exports.MyFcrToolTip = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
require("./index.css");
var _stateBarLogo = _interopRequireDefault(require("./assets/state-bar-logo.png"));
var _stepGradient = _interopRequireDefault(require("./assets/step-gradient.svg"));
var _liveStreaming = _interopRequireDefault(require("./assets/live-streaming.gif"));
var _networkQuality = require("./network-quality");
var _layoutConfig = require("./layout-config");
var _meetingTime = require("./meeting-time");
var _react = require("react");
var _useNamespace = require("../../utilities/use-namespace");
var _tooltip = require("../tooltip");
var _toast = require("../toast");
var _icon = require("../icon");
var _type = require("../icon/type");
var _popover = require("../popover");
var _dropMenu = require("../drop-menu");
var _i18n = require("../../i18n");
var _copyText = require("../../utilities/copy-text");
var _jsxRuntime = require("react/jsx-runtime");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MyFcrToolTip = exports.MyFcrToolTip = function MyFcrToolTip(props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
    content: props.content,
    trigger: "hover",
    placement: "bottom",
    mouseEnterDelay: 0,
    children: props.children
  });
};
var View = exports.View = function View(props) {
  var ns = (0, _useNamespace.useNamespace)('state-bar');
  var t = (0, _i18n.useI18n)();
  var meetingId = '234 223 223';
  var isFullScreen = false;
  var onMeetingIdCopy = function onMeetingIdCopy() {
    (0, _copyText.copyText)(meetingId).then(function () {
      _toast.FcrToastApi.open({
        toastProps: {
          type: 'info',
          content: 'copy_meeting_id_succeed'
        }
      });
    })["catch"](function () {
      _toast.FcrToastApi.open({
        toastProps: {
          type: 'warn',
          content: '.copy_meeting_id_failed'
        }
      });
    });
  };
  var textRef = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    hideLiveStreamingInfoOnOverflow = _useState2[0],
    setHideLiveStreamingInfoOnOverflow = _useState2[1];
  (0, _react.useEffect)(function () {
    var _textRef$current, _textRef$current2;
    var MIN_WIDTH = 84;
    var textWidth = (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth;
    var parentWidth = (_textRef$current2 = textRef.current) === null || _textRef$current2 === void 0 || (_textRef$current2 = _textRef$current2.parentNode) === null || _textRef$current2 === void 0 ? void 0 : _textRef$current2.offsetWidth;
    console.log(textWidth, parentWidth);
    if (textWidth > parentWidth || parentWidth < MIN_WIDTH) {
      setHideLiveStreamingInfoOnOverflow(true);
    } else {
      setHideLiveStreamingInfoOnOverflow(false);
    }
  }, []);
  var PopoverContent = function PopoverContent() {
    var options = [{
      title: t('fmt_statusbar_label_customwating'),
      key: 'watchTheLiveStreamingOnACustomLiveStreamingServer',
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
        type: _type.FcrIconType.FCR_SHARE,
        size: 20,
        colors: {
          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
        }
      }),
      onButtonClick: function onButtonClick() {
        console.log('Option 1');
      }
    }, {
      title: t('fmt_live_label_copylink'),
      key: 'copyLiveLink',
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
        type: _type.FcrIconType.FCR_ATTACH,
        size: 20,
        colors: {
          iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
        }
      }),
      onButtonClick: function onButtonClick() {}
    }, {
      title: t('fmt_tips_button_Stopolive'),
      key: 'stopLiveStreaming',
      type: 'danger',
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
        type: _type.FcrIconType.FCR_SCREENSHARING_ON,
        size: 20,
        colors: {
          iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
        }
      }),
      onButtonClick: function onButtonClick() {
        console.log('Option 2');
      }
    }];
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: ns.e('meeting-info-drop'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
        options: options
      })
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: ns.b(),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: ns.e('left-nav'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
        src: _stateBarLogo["default"],
        alt: "logo",
        className: ns.e('logo')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
        content: t('fmt_uimanager_tips_ilock'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: ns.e('meeting-lock'),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
            type: _type.FcrIconType.FCR_HOME_CODE2,
            className: ns.e('meeting-lock-icon'),
            size: 20
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            children: t('fmt_information_label_lockmeeting')
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: ns.e('meeting-info'),
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
          content: 'Show Network Details',
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: ns.e('info-network'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_networkQuality.NetworkQuality, {
              quality: props.networkQuality
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
          src: _stepGradient["default"],
          alt: "step divider",
          className: ns.e('step-divider')
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
          content: t('fmt_information_options_sharedetail'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: ns.e('info-detail'),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
              type: _type.FcrIconType.FCR_V2_TANHAO_ALART,
              className: ns.e('info-detail-icon'),
              size: 20
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: ns.e('lock-meeting-text'),
              children: t('fmt_meetingInfo_label')
            })]
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
          content: t('fmt_information_label_clicktocopy'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: ns.e('info-meeting-id'),
            onClick: onMeetingIdCopy,
            children: meetingId
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContent, {}),
        placement: "bottomRight",
        trigger: "click",
        overlayInnerStyle: {
          width: '300px',
          boxShadow: 'none',
          border: 'none'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('live-streaming'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
            content: t('fmt_statusbar_tips_onstreaming'),
            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
              className: ns.e('live-streaming-info'),
              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                className: ns.e('live-streaming-info-live-icon'),
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
                  src: _liveStreaming["default"],
                  alt: "live-streaming",
                  width: 20
                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
                  type: _type.FcrIconType.FCR_LIVEICON,
                  size: 39
                })]
              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                className: ns.e('live-streaming-info-text'),
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                  ref: textRef,
                  children: t('fmt_live_label_customizedlive')
                })
              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
                type: _type.FcrIconType.FCR_DROPUP4,
                className: ns.e('live-streaming-info-icon'),
                size: 24,
                colors: {
                  iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
                }
              })]
            })
          })
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: ns.e('right-nav'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
        content: t('fmt_statusbar_label_durationtime', {
          reason1: props.total,
          reason2: t('fmt_statusbar_label_minutes')
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('time'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meetingTime.MeetingTime, _objectSpread({}, props))
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
        content: t('fmt_statusbar_label_switchlayout'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('layout'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_layoutConfig.LayoutConfig, {})
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MyFcrToolTip, {
        content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: ns.e('full-screen'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
            type: isFullScreen ? _type.FcrIconType.FCR_WINDOW_SMALLER : _type.FcrIconType.FCR_WINDOW_BIGGER,
            className: ns.e('full-screen-icon'),
            size: 22
          })
        })
      })]
    })]
  });
};