import "core-js/modules/es.symbol.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.array.for-each.js";
import "core-js/modules/es.array.push.js";
import "core-js/modules/es.object.define-properties.js";
import "core-js/modules/es.object.define-property.js";
import "core-js/modules/es.object.get-own-property-descriptor.js";
import "core-js/modules/es.object.get-own-property-descriptors.js";
import "core-js/modules/es.object.keys.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.for-each.js";
import "core-js/modules/web.dom-collections.for-each.js";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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) { _defineProperty(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; }
import './index.css';
import stateBarLogo from './assets/state-bar-logo.png';
import stepDivider from './assets/step-gradient.svg';
import liveStreamingGif from './assets/live-streaming.gif';
import { NetworkQuality } from './network-quality';
import { LayoutConfig } from './layout-config';
import { MeetingTime } from './meeting-time';
import { useEffect, useRef, useState } from 'react';
import { useNamespace } from '../../utilities/use-namespace';
import { FcrToolTip } from '../tooltip';
import { FcrToastApi } from '../toast';
import { FcrIcon } from '../icon';
import { FcrIconType } from '../icon/type';
import { FcrPopover } from '../popover';
import { FcrDropMenu } from '../drop-menu';
import { useI18n } from '../../i18n';
import { copyText } from '../../utilities/copy-text';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var MyFcrToolTip = function MyFcrToolTip(props) {
  return /*#__PURE__*/_jsx(FcrToolTip, {
    content: props.content,
    trigger: "hover",
    placement: "bottom",
    mouseEnterDelay: 0,
    children: props.children
  });
};
export var View = function View(props) {
  var ns = useNamespace('state-bar');
  var t = useI18n();
  var meetingId = '234 223 223';
  var isFullScreen = false;
  var onMeetingIdCopy = function onMeetingIdCopy() {
    copyText(meetingId).then(function () {
      FcrToastApi.open({
        toastProps: {
          type: 'info',
          content: 'copy_meeting_id_succeed'
        }
      });
    })["catch"](function () {
      FcrToastApi.open({
        toastProps: {
          type: 'warn',
          content: '.copy_meeting_id_failed'
        }
      });
    });
  };
  var textRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    hideLiveStreamingInfoOnOverflow = _useState2[0],
    setHideLiveStreamingInfoOnOverflow = _useState2[1];
  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__*/_jsx(FcrIcon, {
        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__*/_jsx(FcrIcon, {
        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__*/_jsx(FcrIcon, {
        type: FcrIconType.FCR_SCREENSHARING_ON,
        size: 20,
        colors: {
          iconPrimary: 'var(--fcr_ui_scene_ramp_red6)'
        }
      }),
      onButtonClick: function onButtonClick() {
        console.log('Option 2');
      }
    }];
    return /*#__PURE__*/_jsx("div", {
      className: ns.e('meeting-info-drop'),
      children: /*#__PURE__*/_jsx(FcrDropMenu, {
        options: options
      })
    });
  };
  return /*#__PURE__*/_jsxs("div", {
    className: ns.b(),
    children: [/*#__PURE__*/_jsxs("div", {
      className: ns.e('left-nav'),
      children: [/*#__PURE__*/_jsx("img", {
        src: stateBarLogo,
        alt: "logo",
        className: ns.e('logo')
      }), /*#__PURE__*/_jsx(MyFcrToolTip, {
        content: t('fmt_uimanager_tips_ilock'),
        children: /*#__PURE__*/_jsxs("div", {
          className: ns.e('meeting-lock'),
          children: [/*#__PURE__*/_jsx(FcrIcon, {
            type: FcrIconType.FCR_HOME_CODE2,
            className: ns.e('meeting-lock-icon'),
            size: 20
          }), /*#__PURE__*/_jsx("div", {
            children: t('fmt_information_label_lockmeeting')
          })]
        })
      }), /*#__PURE__*/_jsxs("div", {
        className: ns.e('meeting-info'),
        children: [/*#__PURE__*/_jsx(MyFcrToolTip, {
          content: 'Show Network Details',
          children: /*#__PURE__*/_jsx("div", {
            className: ns.e('info-network'),
            children: /*#__PURE__*/_jsx(NetworkQuality, {
              quality: props.networkQuality
            })
          })
        }), /*#__PURE__*/_jsx("img", {
          src: stepDivider,
          alt: "step divider",
          className: ns.e('step-divider')
        }), /*#__PURE__*/_jsx(MyFcrToolTip, {
          content: t('fmt_information_options_sharedetail'),
          children: /*#__PURE__*/_jsxs("div", {
            className: ns.e('info-detail'),
            children: [/*#__PURE__*/_jsx(FcrIcon, {
              type: FcrIconType.FCR_V2_TANHAO_ALART,
              className: ns.e('info-detail-icon'),
              size: 20
            }), /*#__PURE__*/_jsx("div", {
              className: ns.e('lock-meeting-text'),
              children: t('fmt_meetingInfo_label')
            })]
          })
        }), /*#__PURE__*/_jsx(MyFcrToolTip, {
          content: t('fmt_information_label_clicktocopy'),
          children: /*#__PURE__*/_jsx("div", {
            className: ns.e('info-meeting-id'),
            onClick: onMeetingIdCopy,
            children: meetingId
          })
        })]
      }), /*#__PURE__*/_jsx(FcrPopover, {
        content: /*#__PURE__*/_jsx(PopoverContent, {}),
        placement: "bottomRight",
        trigger: "click",
        overlayInnerStyle: {
          width: '300px',
          boxShadow: 'none',
          border: 'none'
        },
        children: /*#__PURE__*/_jsx("div", {
          className: ns.e('live-streaming'),
          children: /*#__PURE__*/_jsx(MyFcrToolTip, {
            content: t('fmt_statusbar_tips_onstreaming'),
            children: /*#__PURE__*/_jsxs("div", {
              className: ns.e('live-streaming-info'),
              children: [/*#__PURE__*/_jsxs("div", {
                className: ns.e('live-streaming-info-live-icon'),
                children: [/*#__PURE__*/_jsx("img", {
                  src: liveStreamingGif,
                  alt: "live-streaming",
                  width: 20
                }), /*#__PURE__*/_jsx(FcrIcon, {
                  type: FcrIconType.FCR_LIVEICON,
                  size: 39
                })]
              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/_jsx("div", {
                className: ns.e('live-streaming-info-text'),
                children: /*#__PURE__*/_jsx("span", {
                  ref: textRef,
                  children: t('fmt_live_label_customizedlive')
                })
              }), !hideLiveStreamingInfoOnOverflow && /*#__PURE__*/_jsx(FcrIcon, {
                type: FcrIconType.FCR_DROPUP4,
                className: ns.e('live-streaming-info-icon'),
                size: 24,
                colors: {
                  iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
                }
              })]
            })
          })
        })
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: ns.e('right-nav'),
      children: [/*#__PURE__*/_jsx(MyFcrToolTip, {
        content: t('fmt_statusbar_label_durationtime', {
          reason1: props.total,
          reason2: t('fmt_statusbar_label_minutes')
        }),
        children: /*#__PURE__*/_jsx("div", {
          className: ns.e('time'),
          children: /*#__PURE__*/_jsx(MeetingTime, _objectSpread({}, props))
        })
      }), /*#__PURE__*/_jsx(MyFcrToolTip, {
        content: t('fmt_statusbar_label_switchlayout'),
        children: /*#__PURE__*/_jsx("div", {
          className: ns.e('layout'),
          children: /*#__PURE__*/_jsx(LayoutConfig, {})
        })
      }), /*#__PURE__*/_jsx(MyFcrToolTip, {
        content: isFullScreen ? t('fmt_statusbar_label_exitfullscreen') : t('fmt_statusbar_label_fullscreen'),
        children: /*#__PURE__*/_jsx("div", {
          className: ns.e('full-screen'),
          children: /*#__PURE__*/_jsx(FcrIcon, {
            type: isFullScreen ? FcrIconType.FCR_WINDOW_SMALLER : FcrIconType.FCR_WINDOW_BIGGER,
            className: ns.e('full-screen-icon'),
            size: 22
          })
        })
      })]
    })]
  });
};