import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/web.timers.js";
import { useEffect, useMemo, useState } from 'react';
import './index.css';
import { FcrIcon } from '../../icon';
import { FcrIconType } from '../../icon/type';
import { MicrophoneIndicator } from '../../microphone-indicator';
import { useI18n } from '../../../i18n';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 32 : _ref$size,
    _ref$micEnabled = _ref.micEnabled,
    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
    _ref$volume = _ref.volume,
    volume = _ref$volume === void 0 ? 0 : _ref$volume;
  var muteColor = {
    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
  };
  return !micEnabled ? /*#__PURE__*/_jsx(FcrIcon, {
    type: FcrIconType.FCR_NOMUTE,
    colors: muteColor,
    size: size
  }) : /*#__PURE__*/_jsx("div", {
    children: /*#__PURE__*/_jsx(MicrophoneIndicator, {
      size: size,
      voicePercent: volume
    })
  });
};
export var MicrophoneDevice = function MicrophoneDevice(_ref2) {
  var isMuted = _ref2.isMuted;
  var t = useI18n();
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    volume = _useState2[0],
    setVolume = _useState2[1];
  useEffect(function () {
    var timer = setInterval(function () {
      setVolume(11 + Math.floor(Math.random() * 90));
    }, 1000);
    return function () {
      return clearInterval(timer);
    };
  }, []);
  var title = useMemo(function () {
    return !isMuted ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
  }, [isMuted]);
  return /*#__PURE__*/_jsx("div", {
    className: "fcr-action-bar-item-wrapper",
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-action-bar-device",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-action-bar-device-inner",
        children: [/*#__PURE__*/_jsx(AudioRecordinDeviceIcon, {
          micEnabled: !isMuted,
          volume: volume
        }), /*#__PURE__*/_jsx("div", {
          className: "fcr-action-bar-device-text",
          children: title
        })]
      })
    })
  });
};
export var CameraDevice = function CameraDevice(_ref3) {
  var isMuted = _ref3.isMuted;
  var t = useI18n();
  var muteColor = {
    iconPrimary: !isMuted ? "var(--fcr_ui_scene_icontext5)" : 'var(--fcr_ui_scene_ramp_red6)',
    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
  };
  var icon = !isMuted ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
  var title = useMemo(function () {
    return !isMuted ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
  }, [isMuted]);
  return /*#__PURE__*/_jsx("div", {
    className: "fcr-action-bar-item-wrapper",
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-action-bar-device",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-action-bar-device-inner",
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: icon,
          colors: muteColor,
          size: 32
        }), /*#__PURE__*/_jsx("div", {
          className: "fcr-action-bar-device-text",
          children: title
        })]
      })
    })
  });
};