import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.array.filter.js";
import "core-js/modules/es.array.find.js";
import "core-js/modules/es.array.includes.js";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.array.reduce.js";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.string.includes.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.filter.js";
import "core-js/modules/esnext.iterator.find.js";
import "core-js/modules/esnext.iterator.map.js";
import "core-js/modules/esnext.iterator.reduce.js";
import { createContext, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import './index.css';
import debounce from 'lodash/debounce';
import { ActionBarItemPlacement } from './item-placement';
import { CameraDevice, MicrophoneDevice } from './device';
import { Participants } from './participants';
import { Record } from './record';
import { ScreenShare } from './screen-share';
import { Settings } from './settings';
import { Chat } from './chat';
import { Board } from './board';
import { End } from './end';
import { Security } from './security';
import { More } from './more';
import { Respond } from './respond';
import { BreakoutRoom } from './breakout-room';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var midActionOrderMap = [/*#__PURE__*/_jsx(Security, {
  id: "Security",
  order: 1
}, "Security"), /*#__PURE__*/_jsx(Participants, {
  id: "Participants",
  order: 2
}, "Participants"), /*#__PURE__*/_jsx(ScreenShare, {
  id: "ScreenShare",
  order: 3
}, "ScreenShare"), /*#__PURE__*/_jsx(Chat, {
  id: "Chat",
  order: 4
}, "Chat"), /*#__PURE__*/_jsx(Record, {
  id: "Record",
  order: 5
}, "Record"), /*#__PURE__*/_jsx(Board, {
  id: "Whiteboard",
  order: 6
}, "Whiteboard"), /*#__PURE__*/_jsx(BreakoutRoom, {
  id: "BreakoutRoom",
  order: 7
}, "BreakoutRoom"), /*#__PURE__*/_jsx(Respond, {
  id: "Respond",
  order: 8
}, "Respond"), /*#__PURE__*/_jsx(Settings, {
  id: "Settings",
  order: 9
}, "Settings"), /*#__PURE__*/_jsx(More, {
  id: "More",
  order: 10
}, "More")];
export var FcrActionBar = function FcrActionBar(props) {
  return /*#__PURE__*/_jsxs("div", {
    className: classnames('fcr-action-bar'),
    children: [/*#__PURE__*/_jsxs(ActionBarItemPlacement, {
      placement: "left",
      children: [/*#__PURE__*/_jsx(MicrophoneDevice, {}), /*#__PURE__*/_jsx(CameraDevice, {})]
    }), /*#__PURE__*/_jsx(ActionBarItemPlacement, {
      placement: "mid",
      children: /*#__PURE__*/_jsx(ActionBarCollapesItems, {
        children: midActionOrderMap
      })
    }), /*#__PURE__*/_jsx(ActionBarItemPlacement, {
      placement: "right",
      children: /*#__PURE__*/_jsx(End, {})
    })]
  });
};
export var actionBarCollapesContext = /*#__PURE__*/createContext({
  items: [],
  setItem: function setItem() {},
  visibleList: []
});
var Provider = actionBarCollapesContext.Provider;
var ActionBarCollapesItems = function ActionBarCollapesItems(_ref) {
  var children = _ref.children;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    items = _useState2[0],
    setItems = _useState2[1];
  var _useState3 = useState(midActionOrderMap.map(function (item) {
      return item.props.id;
    })),
    _useState4 = _slicedToArray(_useState3, 2),
    visibleList = _useState4[0],
    setVisibleList = _useState4[1];
  var ref = 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
  useEffect(function () {
    if (ref.current) {
      var resizeObserver = new ResizeObserver(debounce(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__*/_jsx("div", {
    ref: ref,
    className: "fcr-action-bar-collapse",
    children: /*#__PURE__*/_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(_toConsumableArray(prev), [item]);
          });
        }
      },
      children: children
    })
  });
};