import { useI18n } from '../../../i18n';
import FcrDivider from '../../divider';
import { FcrIconType } from '../../icon/type';
import { FrcTooltipButton } from '../../tooltips-button';
import { CameraDevice, MicrophoneDevice } from '../device';
import { MeetingSecurity } from '../meeting-security';
import { More } from '../more';
import { ParticipantButton } from '../participants';
import { ShareAudio } from '../share-audio';
import './index.css';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var ShareActionNav = function ShareActionNav(props) {
  var t = useI18n();
  var className = props.className,
    _props$onMicrophoneDe = props.onMicrophoneDevicePopoverVisibleChange,
    onMicrophoneDevicePopoverVisibleChange = _props$onMicrophoneDe === void 0 ? function () {} : _props$onMicrophoneDe,
    _props$onCameraDevice = props.onCameraDevicePopoverVisibleChange,
    onCameraDevicePopoverVisibleChange = _props$onCameraDevice === void 0 ? function () {} : _props$onCameraDevice;
  return /*#__PURE__*/_jsxs("div", {
    className: "share-action-nav share-action-nav__can-draggable ".concat(className),
    children: [/*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__media-control-group",
      children: [/*#__PURE__*/_jsx(MicrophoneDevice, {
        onMicrophoneDevicePopoverVisibleChange: onMicrophoneDevicePopoverVisibleChange
      }), /*#__PURE__*/_jsx(CameraDevice, {
        onCameraDevicePopoverVisibleChange: onCameraDevicePopoverVisibleChange
      })]
    }), /*#__PURE__*/_jsx(FcrDivider, {
      style: {
        marginRight: 24,
        height: '20px',
        marginLeft: 30
      }
    }), /*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__meeting-control-group",
      children: [/*#__PURE__*/_jsx(MeetingSecurity, {}), /*#__PURE__*/_jsx(ParticipantButton, {}), /*#__PURE__*/_jsx(FcrDivider, {
        style: {
          margin: '0 8px',
          height: '20px'
        }
      }), /*#__PURE__*/_jsx(FrcTooltipButton, {
        tooltip: {
          content: t('fmt_screenshare_controlbar_button_newScreenshare'),
          icon: {
            type: FcrIconType.FCR_SCREENSHARING_1,
            size: 32,
            colors: {
              iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
            }
          }
        },
        withPopover: false
      }), /*#__PURE__*/_jsx(More, {}), /*#__PURE__*/_jsx(FcrDivider, {
        style: {
          margin: '0 8px',
          height: '20px'
        }
      }), /*#__PURE__*/_jsx(ShareAudio, {
        shareWithAudio: false
      })]
    })]
  });
};