"use strict";

require("core-js/modules/es.object.define-property.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.VideoViewType = exports.VideoOrientation = exports.LocalVideoPlayer = exports.DEFAULT_BEAUTY_VALUE = void 0;
var _react = require("react");
var _useNamespace = require("../../utilities/use-namespace");
var _avatar = require("../avatar");
var _tabs = require("../tabs");
var _tooltip = require("../tooltip");
var _iconButton = require("../icon-button");
var _slider = require("../slider");
var _type = require("../icon/type");
require("./index.css");
var _i18n = require("../../i18n");
var _jsxRuntime = require("react/jsx-runtime");
var MIN_VALUE = 0;
var MAX_VALUE = 100;
var STEP = 1;
var DEFAULT_BEAUTY_VALUE = exports.DEFAULT_BEAUTY_VALUE = 50;
var VideoViewType = exports.VideoViewType = /*#__PURE__*/function (VideoViewType) {
  VideoViewType["CAMERA_VIEW"] = "camera";
  VideoViewType["SELFIE_VIEW"] = "selfie";
  return VideoViewType;
}({});
var LocalVideoPlayer = exports.LocalVideoPlayer = function LocalVideoPlayer(_ref) {
  var _ref$isLocalMirrorEna = _ref.isLocalMirrorEnabled,
    isLocalMirrorEnabled = _ref$isLocalMirrorEna === void 0 ? false : _ref$isLocalMirrorEna,
    _ref$userName = _ref.userName,
    userName = _ref$userName === void 0 ? '' : _ref$userName,
    _ref$showSlider = _ref.showSlider,
    showSlider = _ref$showSlider === void 0 ? false : _ref$showSlider,
    handleResetBeautyValueChange = _ref.handleResetBeautyValueChange,
    _ref$currentEditValue = _ref.currentEditValue,
    currentEditValue = _ref$currentEditValue === void 0 ? DEFAULT_BEAUTY_VALUE : _ref$currentEditValue,
    containerDom = _ref.containerDom,
    handleBeautyValueChange = _ref.handleBeautyValueChange,
    _setVideoOrientation = _ref.setVideoOrientation,
    cameraDeviceId = _ref.cameraDeviceId,
    showCameraPreview = _ref.showCameraPreview,
    _ref$showTopTips = _ref.showTopTips,
    showTopTips = _ref$showTopTips === void 0 ? false : _ref$showTopTips,
    startLocalVideo = _ref.startLocalVideo,
    stopLocalVideo = _ref.stopLocalVideo,
    handleVideoViewChange = _ref.handleVideoViewChange,
    _ref$currentVideoView = _ref.currentVideoViewType,
    currentVideoViewType = _ref$currentVideoView === void 0 ? VideoViewType.SELFIE_VIEW : _ref$currentVideoView,
    _ref$showRotation = _ref.showRotation,
    showRotation = _ref$showRotation === void 0 ? true : _ref$showRotation,
    avatarImage = _ref.avatarImage;
  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
  var frameNs = (0, _useNamespace.useNamespace)('device-settings-video-player');
  var t = (0, _i18n.useI18n)();
  var elementRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    var element = elementRef.current;
    if (cameraDeviceId && showCameraPreview && element) {
      startLocalVideo === null || startLocalVideo === void 0 || startLocalVideo(element);
    }
    return function () {
      if (cameraDeviceId && showCameraPreview && element) {
        stopLocalVideo === null || stopLocalVideo === void 0 || stopLocalVideo(element);
      }
    };
  }, [cameraDeviceId, showCameraPreview]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: ns.e('preview'),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: frameNs.e('frame'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: frameNs.b(),
        ref: elementRef
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
      size: 80,
      textSize: 24,
      nickName: userName || '',
      avatarImage: avatarImage
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: ns.e('view-select'),
      children: [showTopTips && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: ns.e('top'),
        children: t('fmt_internalsetting_tips_nocamerajoin')
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: ns.e('bottom'),
        children: [isLocalMirrorEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
          items: [{
            label: t('fmt_uimanager_option_Cameraview'),
            key: VideoViewType.CAMERA_VIEW
          }, {
            label: t('fmt_uimanager_option_Selfieview'),
            key: VideoViewType.SELFIE_VIEW
          }],
          activeKey: currentVideoViewType,
          onChange: function onChange(key) {
            handleVideoViewChange === null || handleVideoViewChange === void 0 || handleVideoViewChange(key);
          }
        }), showSlider && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: ns.e('beauty-slider-container'),
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
            content: t('fmt_device_reset'),
            mouseEnterDelay: 0,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
                className: ns.e('beauty-reset'),
                size: "small",
                iconColors: {
                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
                },
                onClick: handleResetBeautyValueChange,
                icon: _type.FcrIconType.FCR_RESET
              })
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: ns.e('beauty-slider'),
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
              value: currentEditValue,
              min: MIN_VALUE,
              max: MAX_VALUE,
              step: STEP,
              draggableDom: containerDom,
              onChange: function onChange(v) {
                handleBeautyValueChange === null || handleBeautyValueChange === void 0 || handleBeautyValueChange(v);
              }
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: ns.e('beauty-slider-value'),
              children: currentEditValue
            })]
          })]
        })]
      }), showCameraPreview && showRotation && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoOrientation, {
        setVideoOrientation: function setVideoOrientation() {
          _setVideoOrientation === null || _setVideoOrientation === void 0 || _setVideoOrientation();
        }
      })]
    })]
  });
};
var VideoOrientation = exports.VideoOrientation = function VideoOrientation(_ref2) {
  var setVideoOrientation = _ref2.setVideoOrientation;
  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
  var t = (0, _i18n.useI18n)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
    content: t('fmt_uimanager_option_flipleaf'),
    mouseEnterDelay: 0,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: ns.e('video-flip-container'),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
        className: ns.e('video-flip'),
        size: "small",
        iconColors: {
          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
        },
        icon: _type.FcrIconType.FCR_ROTATINGVIDEO,
        onClick: setVideoOrientation
      })
    })
  });
};
var _default = exports["default"] = LocalVideoPlayer;