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 } 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,
      children = _ref.children,
      others = _objectWithoutProperties(_ref, ['portal', 'onHide', 'onRecord', 'children']);

  // context
  var context = useContext(Context) || {};
  var locale = context.locale || {};

  var refEl = useRef(null);
  var refElStart = useRef(null);
  var refElStop = useRef(null);
  var refElTime = useRef(null);
  var refElTimeTarget = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  function openCamera() {
    CameraRecorder.init({
      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, file) {
        onRecord(e, file);
      }
    });
  }
  function start() {
    CameraRecorder.startRecord();
    refElStart.current.style.display = 'none';
    refElStop.current.style.display = 'block';
    refElTime.current.style.display = 'block';
  }
  function stop() {
    refElStop.current.style.display = 'none';
    refElTime.current.style.display = 'none';
    CameraRecorder.stopRecord();
  }

  function closeRecorder(e) {
    refElStop.current.style.display = 'none';
    refElTime.current.style.display = 'none';
    CameraRecorder.stopRecord(null);
    if (onHide) onHide(e);
  }

  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: refElTime, className: 'camera-recorder-timer' },
      React.createElement('span', { className: 'camera-recorder-timer-dot' }),
      React.createElement(
        'span',
        { ref: refElTimeTarget, className: 'camera-recorder-timer-label' },
        '00:03'
      )
    ),
    React.createElement('div', { className: 'camera-close', onClick: closeRecorder }),
    children
  ), portal || context.portal || document.getElementById('root') || document.body);
});

export default Camera;