var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { forwardRef, useContext, useRef, useImperativeHandle, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import Context from './../Context/instance.js';
import CameraRecorder from './CameraRecorder.js';

var Camera = forwardRef(function (_ref, ref) {
  var portal = _ref.portal,
      onHide = _ref.onHide,
      onRecord = _ref.onRecord,
      maxDuration = _ref.maxDuration,
      children = _ref.children,
      others = _objectWithoutProperties(_ref, ['portal', 'onHide', 'onRecord', 'maxDuration', 'children']);

  // context
  var context = useContext(Context) || {};
  var locale = context.locale || function (key) {
    return key || '';
  };

  var _useState = useState({}),
      successResult = _useState[0],
      setSuccessResult = _useState[1];

  var refEl = useRef(null);
  var refElStart = useRef(null);
  var refElStop = useRef(null);
  var refElTime = useRef(null);
  var refElTimeTarget = useRef(null);
  var refElSuccess = useRef(null);
  var refElError = useRef(null);
  var refElErrorTarget = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  function openCamera() {
    CameraRecorder.init({
      maxDuration: maxDuration,
      timer: refElTimeTarget.current,
      video: refEl.current,
      onOpened: function onOpened(e, stream) {
        if (refElStart.current) refElStart.current.style.display = 'block';
        // e.target.play();
      },
      onStop: function onStop(e) {
        if (refElStop.current) refElStop.current.style.display = 'none';
        if (refElTime.current) refElTime.current.style.display = 'none';
        if (refElSuccess.current) refElSuccess.current.style.display = 'block';
        setSuccessResult(e);
      },
      onError: function onError(e, err) {
        if (refElError.current) refElError.current.style.display = 'block';
        if (refElErrorTarget.current) refElErrorTarget.current.innerHTML = err.errMsg;
      }
    });
  }
  function start() {
    CameraRecorder.startRecord();
    refElStart.current.style.display = 'none';
    refElStop.current.style.display = 'block';
    refElTime.current.style.display = 'block';
  }
  function stop(e) {
    CameraRecorder.stopRecord();
  }

  function closeCamera(e) {
    CameraRecorder.stopRecord(null); // 关闭不走停止onStop回调
    if (onHide) onHide(e);
  }

  function success() {
    onRecord(successResult);
  }

  useEffect(function () {
    openCamera();
  }, []);

  return createPortal(React.createElement(
    'div',
    _extends({ ref: ref }, others, { className: 'camera' + (others.className ? ' ' + others.className : '') }),
    React.createElement('video', { ref: refEl, width: '100%', height: '100%', autoPlay: '', playsInline: true, muted: true }),
    React.createElement(
      'div',
      { ref: refElStart, className: 'camera-recorder-start', onClick: start },
      React.createElement(
        'div',
        { className: 'camera-recorder-start-round' },
        React.createElement('div', { className: 'camera-recorder-start-dot' })
      )
    ),
    React.createElement(
      'div',
      { ref: refElStop, className: 'camera-recorder-stop', onClick: stop },
      React.createElement('div', { className: 'camera-recorder-stop-dot' })
    ),
    React.createElement(
      'div',
      { ref: refElSuccess, className: 'camera-success', onClick: success },
      React.createElement('div', { className: 'camera-success-icon' })
    ),
    React.createElement(
      'div',
      { ref: refElTime, className: 'camera-recorder-timer' },
      React.createElement('span', { className: 'camera-recorder-timer-dot' }),
      React.createElement(
        'span',
        { ref: refElTimeTarget, className: 'camera-recorder-timer-label' },
        '00:00'
      )
    ),
    React.createElement(
      'div',
      { ref: refElError, className: 'camera-recorder-error' },
      React.createElement('span', { ref: refElErrorTarget, className: 'camera-recorder-error-label' })
    ),
    React.createElement('div', { className: 'camera-close', onClick: closeCamera }),
    children
  ), portal || context.portal || document.getElementById('root') || document.body);
});

export default Camera;