import { useI18n } from '../../../i18n';
import FcrDivider from '../../divider';
import { FcrIcon } from '../../icon';
import { FcrIconType } from '../../icon/type';
import { FcrRadioGroup } from '../../radio';
import { FrcTooltipButton } from '../../tooltips-button';
import { MicrophoneState } from '../microphone-state';
import './index.css';
import { FcrIconPhoneCall } from '../../icon-phone-call';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var CameraDevice = function CameraDevice(props) {
  var t = useI18n();
  var _props$onCameraDevice = props.onCameraDevicePopoverVisibleChange,
    onCameraDevicePopoverVisibleChange = _props$onCameraDevice === void 0 ? function () {} : _props$onCameraDevice,
    popoverContent = props.popoverContent,
    isMuted = props.isMuted;
  return /*#__PURE__*/_jsx("div", {
    className: "share-action-nav__button fcr-divider-vertical share-action-nav__not-draggable",
    children: /*#__PURE__*/_jsx(FrcTooltipButton, {
      tooltip: {
        icon: {
          type: isMuted ? FcrIconType.FCR_CAMERAOFF : FcrIconType.FCR_CAMERA,
          colors: {
            iconPrimary: isMuted ? 'var(--fcr_ui_scene_ramp_red6)' : 'var(--fcr_web_ui_scene_mainicon1)',
            iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
          },
          size: 32
        },
        content: t('fmt_toolbar_label_camera')
      },
      withPopover: true,
      onTooltipButtonClick: props.onTooltipButtonClick,
      popover: {
        content: popoverContent ? popoverContent : /*#__PURE__*/_jsx(VideoDeviceListPopoverContent, {}),
        onVisibleChange: onCameraDevicePopoverVisibleChange
      }
    })
  });
};
var ConnectType = /*#__PURE__*/function (ConnectType) {
  ConnectType[ConnectType["NONE"] = 0] = "NONE";
  ConnectType[ConnectType["COMPUTER"] = 1] = "COMPUTER";
  ConnectType[ConnectType["PHONE"] = 2] = "PHONE";
  return ConnectType;
}(ConnectType || {});
export var MicrophoneDevice = function MicrophoneDevice(props) {
  var t = useI18n();
  var _props$isMuted = props.isMuted,
    isMuted = _props$isMuted === void 0 ? true : _props$isMuted,
    _props$voicePercent = props.voicePercent,
    voicePercent = _props$voicePercent === void 0 ? 0 : _props$voicePercent,
    _props$connectType = props.connectType,
    connectType = _props$connectType === void 0 ? ConnectType.NONE : _props$connectType;
  return /*#__PURE__*/_jsx("div", {
    className: "share-action-nav__button share-action-nav__not-draggable",
    children: /*#__PURE__*/_jsx(FrcTooltipButton, {
      tooltip: {
        content: t('fmt_setting_label_Mic')
      },
      onTooltipButtonClick: props.onTooltipButtonClick,
      withPopover: true,
      popover: {
        content: props.popoverContent ? props.popoverContent : /*#__PURE__*/_jsx(AudioDeviceListPopoverContent, {}),
        onVisibleChange: props.onMicrophoneDevicePopoverVisibleChange
      },
      children: connectType === ConnectType.COMPUTER ? /*#__PURE__*/_jsx(MicrophoneState, {
        isMicrophoneMuted: isMuted,
        voicePercent: voicePercent,
        size: 32
      }) : connectType === ConnectType.NONE ? /*#__PURE__*/_jsx(FcrIcon, {
        type: FcrIconType.FCR_WEB_CONNECTSOUND,
        size: 32,
        colors: {
          iconPrimary: "var(--fcr_web_ui_scene_mainicon1)",
          iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
        }
      }) : /*#__PURE__*/_jsx(FcrIconPhoneCall, {
        isMuted: isMuted
      })
    })
  });
};
var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent() {
  var t = useI18n();
  return /*#__PURE__*/_jsxs("div", {
    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
    children: [/*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__media-list-group",
      children: [/*#__PURE__*/_jsx("div", {
        className: "share-action-nav__media-title",
        children: t('fmt_toolbar_label_camera')
      }), /*#__PURE__*/_jsx(FcrRadioGroup, {
        options: [{
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_toolbar_label_camera'), "1"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent',
          checked: true
        }, {
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_toolbar_label_camera'), "2"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent'
        }],
        onChange: function onChange(value) {
          console.log(value);
        }
      })]
    }), /*#__PURE__*/_jsx(FcrDivider, {
      type: "horizontal",
      style: {
        margin: '8px 0'
      }
    }), /*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__media-list-group",
      children: [/*#__PURE__*/_jsx("div", {
        className: "share-action-nav__media-title",
        children: t('fmt_setting_label_Mic')
      }), /*#__PURE__*/_jsx(FcrRadioGroup, {
        options: [{
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Mic'), "1"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent',
          checked: true
        }, {
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Mic'), "2"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent'
        }],
        onChange: function onChange(value) {
          console.log(value);
        }
      })]
    }), /*#__PURE__*/_jsx(FcrDivider, {
      type: "horizontal",
      style: {
        margin: '8px 0'
      }
    }), /*#__PURE__*/_jsx("div", {
      className: "share-action-nav__media-list-group",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: FcrIconType.FCR_SETTING,
          size: 24,
          colors: {
            iconPrimary: 'var(--fcr_ui_scene_icontext5)'
          }
        }), /*#__PURE__*/_jsx("span", {
          children: t('fmt_setting_option_Video')
        })]
      })
    })]
  });
};
var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent() {
  var t = useI18n();
  return /*#__PURE__*/_jsxs("div", {
    className: "share-action-nav__popover-inner-content share-action-nav__not-draggable",
    children: [/*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__media-list-group",
      children: [/*#__PURE__*/_jsx("div", {
        className: "share-action-nav__media-title",
        children: t('fmt_setting_label_Speaker')
      }), /*#__PURE__*/_jsx(FcrRadioGroup, {
        options: [{
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Speaker'), "1"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent',
          checked: true
        }, {
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Speaker'), "1"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent'
        }],
        onChange: function onChange(value) {
          console.log(value);
        }
      })]
    }), /*#__PURE__*/_jsx(FcrDivider, {
      type: "horizontal",
      style: {
        margin: '8px 0'
      }
    }), /*#__PURE__*/_jsxs("div", {
      className: "share-action-nav__media-list-group",
      children: [/*#__PURE__*/_jsx("div", {
        className: "share-action-nav__media-title",
        children: t('fmt_setting_label_Mic')
      }), /*#__PURE__*/_jsx(FcrRadioGroup, {
        options: [{
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Mic'), "1"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent',
          checked: true
        }, {
          label: /*#__PURE__*/_jsxs("span", {
            className: "color-dark-gray-icontext1",
            children: [t('fmt_setting_label_Mic'), "2"]
          }),
          iconColor: 'var(--fcr_ui_scene_ramp_brand6)',
          styleType: 'transparent'
        }],
        onChange: function onChange(value) {
          console.log(value);
        }
      })]
    }), /*#__PURE__*/_jsx(FcrDivider, {
      type: "horizontal",
      style: {
        margin: '8px 0'
      }
    }), /*#__PURE__*/_jsx("div", {
      className: "share-action-nav__media-list-group ",
      children: /*#__PURE__*/_jsxs("div", {
        className: "fcr-flex fcr-items-center share-action-nav__popover-option-media-setting share-action-nav__popover-option",
        children: [/*#__PURE__*/_jsx(FcrIcon, {
          type: FcrIconType.FCR_SETTING,
          size: 24,
          colors: {
            iconPrimary: 'var(--fcr_ui_scene_icontext5)'
          }
        }), /*#__PURE__*/_jsx("span", {
          className: "share-action-nav__device-setting",
          children: t('fmt_setting_label_setting')
        })]
      })
    })]
  });
};