import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.object.to-string.js";
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 { FcrToolTip } from '../../tooltip';
import { FcrPopover } from '../../popover';
import { FcrRadio } from '../../radio';
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,
    _ref$pathColor = _ref.pathColor,
    pathColor = _ref$pathColor === void 0 ? 'white' : _ref$pathColor,
    _ref$stopStartColor = _ref.stopStartColor,
    stopStartColor = _ref$stopStartColor === void 0 ? 'white' : _ref$stopStartColor;
  var muteColor = {
    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
  };
  var t = useI18n();
  return !micEnabled ? /*#__PURE__*/_jsx(FcrIcon, {
    type: FcrIconType.FCR_NOMUTE,
    colors: muteColor,
    size: size
  }) : /*#__PURE__*/_jsx("div", {
    children: /*#__PURE__*/_jsx(MicrophoneIndicator, {
      size: size,
      voicePercent: volume,
      pathColor: pathColor,
      stopStartColor: stopStartColor
    })
  });
};
export var MicrophoneDevice = function MicrophoneDevice() {
  var _useDeviceTooltipVisi = useDeviceTooltipVisible(),
    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
  var t = useI18n();
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    micEnabled = _useState2[0],
    setMicEnabled = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    volume = _useState4[0],
    setVolume = _useState4[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 micEnabled ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
  }, [micEnabled]);
  var tooltip = title;
  return /*#__PURE__*/_jsx(FcrToolTip, {
    mouseEnterDelay: 0,
    visible: tooltipVisible,
    onVisibleChange: handleTooltipVisibleChanged,
    content: tooltip,
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-action-bar-item-wrapper",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-action-bar-device",
        onClick: function onClick() {
          setMicEnabled(!micEnabled);
        },
        children: [/*#__PURE__*/_jsxs("div", {
          className: "fcr-action-bar-device-inner",
          children: [/*#__PURE__*/_jsx(AudioRecordinDeviceIcon, {
            micEnabled: micEnabled,
            volume: volume
          }), /*#__PURE__*/_jsx("div", {
            className: "fcr-action-bar-device-text",
            children: title
          })]
        }), /*#__PURE__*/_jsx(FcrPopover, {
          overlayClassName: "fcr-action-bar--device-popover",
          visible: popoverOpened,
          onVisibleChange: handlePopoverVisibleChanged,
          trigger: "click",
          content: /*#__PURE__*/_jsx(AudioDeviceListPopoverContent, {
            onMoreClick: function onMoreClick() {}
          }),
          children: /*#__PURE__*/_jsx("div", {
            onClick: function onClick(e) {
              e.stopPropagation();
            },
            className: "fcr-action-bar-device-extra",
            children: /*#__PURE__*/_jsx(FcrIcon, {
              type: FcrIconType.FCR_DROPUP4,
              colors: {
                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
              },
              size: 24
            })
          })
        })]
      })
    })
  });
};
export var CameraDevice = function CameraDevice() {
  var t = useI18n();
  var _useDeviceTooltipVisi2 = useDeviceTooltipVisible(),
    tooltipVisible = _useDeviceTooltipVisi2.tooltipVisible,
    popoverOpened = _useDeviceTooltipVisi2.popoverOpened,
    handlePopoverVisibleChanged = _useDeviceTooltipVisi2.handlePopoverVisibleChanged,
    handleTooltipVisibleChanged = _useDeviceTooltipVisi2.handleTooltipVisibleChanged,
    setPopoverOpened = _useDeviceTooltipVisi2.setPopoverOpened;
  var _useState5 = useState(true),
    _useState6 = _slicedToArray(_useState5, 2),
    cameraEnabled = _useState6[0],
    setCameraEnabled = _useState6[1];
  var muteColor = {
    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
  };
  var icon = cameraEnabled ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
  var title = useMemo(function () {
    return cameraEnabled ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
  }, [cameraEnabled]);
  var tooltip = title;
  return /*#__PURE__*/_jsx(FcrToolTip, {
    mouseEnterDelay: 0,
    onVisibleChange: handleTooltipVisibleChanged,
    visible: tooltipVisible,
    content: tooltip,
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-action-bar-item-wrapper",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-action-bar-device",
        onClick: function onClick() {
          setCameraEnabled(!cameraEnabled);
        },
        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
          })]
        }), /*#__PURE__*/_jsx(FcrPopover, {
          visible: popoverOpened,
          onVisibleChange: handlePopoverVisibleChanged,
          overlayClassName: "fcr-action-bar--device-popover",
          content: /*#__PURE__*/_jsx(VideoDeviceListPopoverContent, {
            onMoreClick: function onMoreClick() {}
          }),
          trigger: "click",
          children: /*#__PURE__*/_jsx("div", {
            onClick: function onClick(e) {
              e.stopPropagation();
            },
            className: "fcr-action-bar-device-extra",
            children: /*#__PURE__*/_jsx(FcrIcon, {
              type: FcrIconType.FCR_DROPUP4,
              colors: {
                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
              },
              size: 24
            })
          })
        })]
      })
    })
  });
};
var useDeviceTooltipVisible = function useDeviceTooltipVisible() {
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    popoverOpened = _useState8[0],
    setPopoverOpened = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    tooltipVisible = _useState0[0],
    setTooltipVisible = _useState0[1];
  var handleTooltipVisibleChanged = function handleTooltipVisibleChanged(visible) {
    if (popoverOpened) {
      setTooltipVisible(false);
    } else {
      setTooltipVisible(visible);
    }
  };
  var handlePopoverVisibleChanged = function handlePopoverVisibleChanged(visible) {
    if (tooltipVisible) {
      setTooltipVisible(false);
    }
    setPopoverOpened(visible);
  };
  return {
    popoverOpened: popoverOpened,
    tooltipVisible: tooltipVisible,
    handleTooltipVisibleChanged: handleTooltipVisibleChanged,
    handlePopoverVisibleChanged: handlePopoverVisibleChanged,
    setPopoverOpened: setPopoverOpened,
    setTooltipVisible: setTooltipVisible
  };
};
var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent(_ref2) {
  var onMoreClick = _ref2.onMoreClick;
  var t = useI18n();
  var _useState1 = useState('default'),
    _useState10 = _slicedToArray(_useState1, 2),
    cameraDeviceId = _useState10[0],
    setCameraDeviceId = _useState10[1];
  var cameraDevicesList = [{
    text: '默认-imac摄像头（buildt-in）',
    value: 'default'
  }, {
    text: 'Camera device',
    value: 'device1'
  }];
  return /*#__PURE__*/_jsxs("div", {
    className: "fcr-device-popover-content",
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    children: [/*#__PURE__*/_jsx("div", {
      className: "fcr-device-popover-content-device-list",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-device-popover-content-device",
        children: [/*#__PURE__*/_jsx("div", {
          className: "fcr-device-popover-content-device-label",
          children: "Select a camera"
        }), /*#__PURE__*/_jsxs("div", {
          className: "fcr-device-popover-content-device-options",
          children: [cameraDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx(FcrRadio, {
              name: "No device",
              styleType: "transparent",
              checked: true,
              label: t('fmt_toolbar_tips_nodevice')
            })
          }), cameraDevicesList.map(function (device) {
            return /*#__PURE__*/_jsx("div", {
              onClick: function onClick() {},
              children: /*#__PURE__*/_jsx(FcrRadio, {
                name: "video",
                styleType: "transparent",
                checked: cameraDeviceId === device.value,
                onChange: function onChange(v) {
                  return v && setCameraDeviceId(device.value);
                },
                label: device.text
              })
            }, device.value);
          })]
        })]
      })
    }), /*#__PURE__*/_jsxs("div", {
      className: "fcr-device-popover-content-more",
      children: [/*#__PURE__*/_jsx("div", {
        className: "fcr-device-popover-content-more-item",
        children: t('fmt_device_label_video_list_selectVirtualBackground')
      }), /*#__PURE__*/_jsx("div", {
        className: "fcr-device-popover-content-more-item",
        children: t('fmt_device_label_video_list_selectVideoFilter')
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: "fcr-device-popover-content-more",
      children: /*#__PURE__*/_jsxs("div", {
        className: 'fcr-device-popover-content-more-item contain-icon',
        onClick: onMoreClick,
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: FcrIconType.FCR_SETTING,
          size: 24
        }), /*#__PURE__*/_jsxs("span", {
          children: [t('fmt_setting_option_Video'), "..."]
        })]
      })
    })]
  });
};
var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(_ref3) {
  var onMoreClick = _ref3.onMoreClick;
  var t = useI18n();
  var _useState11 = useState('default'),
    _useState12 = _slicedToArray(_useState11, 2),
    audioRecordingDeviceId = _useState12[0],
    setAudioRecordingDeviceId = _useState12[1];
  var _useState13 = useState('default'),
    _useState14 = _slicedToArray(_useState13, 2),
    audioPlaybackDeviceId = _useState14[0],
    setAudioPlaybackDeviceId = _useState14[1];
  var recordingDevicesList = [{
    text: '默认-imac麦克风（buildt-in）',
    value: 'default'
  }, {
    text: 'wechat audio device',
    value: 'wechat'
  }];
  var playbackDevicesList = [{
    text: '默认-外置耳机2',
    value: 'default'
  }, {
    text: '外置耳机1',
    value: 'device1'
  }, {
    text: 'imac扬声器（buildt-in）',
    value: 'device2'
  }];
  return /*#__PURE__*/_jsxs("div", {
    className: "fcr-device-popover-content",
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    children: [/*#__PURE__*/_jsxs("div", {
      className: "fcr-device-popover-content-device-list",
      children: [/*#__PURE__*/_jsxs("div", {
        className: "fcr-device-popover-content-device",
        children: [/*#__PURE__*/_jsx("div", {
          className: "fcr-device-popover-content-device-label",
          children: t('fmt_pstn_label_micselect')
        }), /*#__PURE__*/_jsxs("div", {
          className: "fcr-device-popover-content-device-options",
          children: [recordingDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx(FcrRadio, {
              name: "No device",
              styleType: "transparent",
              checked: true,
              label: t('fmt_toolbar_tips_nodevice')
            })
          }), recordingDevicesList.map(function (device) {
            return /*#__PURE__*/_jsx("div", {
              children: /*#__PURE__*/_jsx(FcrRadio, {
                name: "mic",
                styleType: "transparent",
                checked: audioRecordingDeviceId === device.value,
                label: device.text,
                onChange: function onChange(v) {
                  return v && setAudioRecordingDeviceId(device.value);
                }
              })
            }, device.value);
          })]
        })]
      }), /*#__PURE__*/_jsxs("div", {
        className: "fcr-device-popover-content-device",
        children: [/*#__PURE__*/_jsx("div", {
          className: "fcr-device-popover-content-device-label",
          children: t('fmt_pstn_label_micselect')
        }), /*#__PURE__*/_jsxs("div", {
          className: "fcr-device-popover-content-device-options",
          children: [playbackDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
            children: /*#__PURE__*/_jsx(FcrRadio, {
              name: "No device",
              styleType: "transparent",
              checked: true,
              label: t('fmt_toolbar_tips_nodevice')
            })
          }), playbackDevicesList.map(function (device) {
            return /*#__PURE__*/_jsx("div", {
              onClick: function onClick() {},
              children: /*#__PURE__*/_jsx(FcrRadio, {
                name: "speaker",
                styleType: "transparent",
                checked: audioPlaybackDeviceId === device.value,
                label: device.text,
                onChange: function onChange(v) {
                  return v && setAudioPlaybackDeviceId(device.value);
                }
              })
            }, device.value);
          })]
        })]
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: "fcr-device-popover-content-more",
      children: [/*#__PURE__*/_jsx("div", {
        className: "fcr-device-popover-content-more-item",
        children: /*#__PURE__*/_jsx("span", {
          children: t('fmt_device_label_audio_list_leaveComputerAudio')
        })
      }), /*#__PURE__*/_jsx("div", {
        className: "fcr-device-popover-content-more-item",
        children: /*#__PURE__*/_jsx("span", {
          children: t('fmt_device_label_audio_list_switchToPhoneCall')
        })
      }), /*#__PURE__*/_jsx("div", {
        className: "fcr-device-popover-content-more-item",
        children: /*#__PURE__*/_jsx("span", {
          children: t('fmt_device_label_audio_list_testAudioDevice')
        })
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: "fcr-device-popover-content-more",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-device-popover-content-more-item contain-icon",
        onClick: onMoreClick,
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: FcrIconType.FCR_SETTING,
          size: 24
        }), /*#__PURE__*/_jsxs("span", {
          children: [t('fmt_pstn_options_audio_setting'), "..."]
        })]
      })
    })]
  });
};