"use strict";

require("core-js/modules/es.object.define-property.js");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.actionBarCollapesContext = exports.FcrActionBar = void 0;
require("core-js/modules/es.array.concat.js");
require("core-js/modules/es.array.filter.js");
require("core-js/modules/es.array.find.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.array.reduce.js");
require("core-js/modules/es.function.name.js");
require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.find.js");
require("core-js/modules/esnext.iterator.map.js");
require("core-js/modules/esnext.iterator.reduce.js");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
require("./index.css");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _itemPlacement = require("./item-placement");
var _device = require("./device");
var _participants = require("./participants");
var _record = require("./record");
var _screenShare = require("./screen-share");
var _settings = require("./settings");
var _chat = require("./chat");
var _board = require("./board");
var _end = require("./end");
var _security = require("./security");
var _more = require("./more");
var _respond = require("./respond");
var _breakoutRoom = require("./breakout-room");
var _jsxRuntime = require("react/jsx-runtime");
var midActionOrderMap = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_security.Security, {
  id: "Security",
  order: 1
}, "Security"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.Participants, {
  id: "Participants",
  order: 2
}, "Participants"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_screenShare.ScreenShare, {
  id: "ScreenShare",
  order: 3
}, "ScreenShare"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_chat.Chat, {
  id: "Chat",
  order: 4
}, "Chat"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_record.Record, {
  id: "Record",
  order: 5
}, "Record"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_board.Board, {
  id: "Whiteboard",
  order: 6
}, "Whiteboard"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_breakoutRoom.BreakoutRoom, {
  id: "BreakoutRoom",
  order: 7
}, "BreakoutRoom"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_respond.Respond, {
  id: "Respond",
  order: 8
}, "Respond"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_settings.Settings, {
  id: "Settings",
  order: 9
}, "Settings"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_more.More, {
  id: "More",
  order: 10
}, "More")];
var FcrActionBar = exports.FcrActionBar = function FcrActionBar(props) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _classnames["default"])('fcr-action-bar'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_itemPlacement.ActionBarItemPlacement, {
      placement: "left",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_device.MicrophoneDevice, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_device.CameraDevice, {})]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
      placement: "mid",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBarCollapesItems, {
        children: midActionOrderMap
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_itemPlacement.ActionBarItemPlacement, {
      placement: "right",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_end.End, {})
    })]
  });
};
var actionBarCollapesContext = exports.actionBarCollapesContext = /*#__PURE__*/(0, _react.createContext)({
  items: [],
  setItem: function setItem() {},
  visibleList: []
});
var Provider = actionBarCollapesContext.Provider;
var ActionBarCollapesItems = function ActionBarCollapesItems(_ref) {
  var children = _ref.children;
  var _useState = (0, _react.useState)([]),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    items = _useState2[0],
    setItems = _useState2[1];
  var _useState3 = (0, _react.useState)(midActionOrderMap.map(function (item) {
      return item.props.id;
    })),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    visibleList = _useState4[0],
    setVisibleList = _useState4[1];
  var ref = (0, _react.useRef)(null);
  // if container width is not enough, collapse the items by order
  // if container width is enough, show all items
  // detect container width change by resize observer
  // More button is always visible
  (0, _react.useEffect)(function () {
    if (ref.current) {
      var resizeObserver = new ResizeObserver((0, _debounce["default"])(function (entries) {
        var more = items.find(function (item) {
          return item.name === 'More';
        });
        var containerWidth = entries[0].contentRect.width - (more ? more.width : 0);
        var totalWidth = items.filter(function (i) {
          return i.name !== 'More';
        }).reduce(function (prev, curr) {
          return prev + curr.width;
        }, 0);
        if (containerWidth < totalWidth) {
          var total = 0;
          var list = items.filter(function (item) {
            if (item.name === 'More') {
              return true;
            }
            total += item.width;
            return total < containerWidth;
          });
          setVisibleList(list.map(function (item) {
            return item.name;
          }));
        } else {
          setVisibleList(items.map(function (item) {
            return item.name;
          }));
        }
      }, 0));
      resizeObserver.observe(ref.current);
      return function () {
        resizeObserver.disconnect();
      };
    }
  }, [items]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    ref: ref,
    className: "fcr-action-bar-collapse",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
      value: {
        visibleList: visibleList,
        items: items,
        collapseList: items.filter(function (item) {
          return !visibleList.includes(item.name);
        }).map(function (item) {
          return item.name;
        }),
        setItem: function setItem(item) {
          setItems(function (prev) {
            return [].concat((0, _toConsumableArray2["default"])(prev), [item]);
          });
        }
      },
      children: children
    })
  });
};