import React, { useEffect, useState } from 'react';
import VideoRecorder from 'react-video-recorder';
import { RiDeleteBin6Line, RiStopCircleLine, BiRightArrowCircle, RiRecordCircleLine, MdFlipCameraAndroid } from 'react-icons/all';
import Timer from 'react-video-recorder/lib/defaults/timer';
import Countdown from 'react-video-recorder/lib/defaults/countdown';
import "./style.css";

var VideoRecord = function VideoRecord(props) {
  var isInvertCam = props.isInvertCam,
      aspectArea = props.aspectArea;

  var _useState = useState(null),
      videoBlob = _useState[0],
      setVideoBlob = _useState[1];

  var onRecording = function onRecording(value) {
    if (props === null || props === void 0 ? void 0 : props.onRecording) props.onRecording(value);
  };

  var onSubmit = function onSubmit(video) {
    props.onFinish(video);
  };

  useEffect(function () {
    var supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

    if (supportedConstraints.width && supportedConstraints.height && supportedConstraints.aspectRatio) {
      navigator.mediaDevices.getUserMedia({
        audio: true,
        video: {
          width: aspectArea === null || aspectArea === void 0 ? void 0 : aspectArea.width,
          height: aspectArea === null || aspectArea === void 0 ? void 0 : aspectArea.height,
          aspectRatio: {
            exact: 1.777777777777778,
            ideal: 1.777777777777778
          },
          resizeMode: 'crop-and-scale'
        }
      });
    }
  }, []);
  return console.log('aspectArea', aspectArea), /*#__PURE__*/React.createElement("div", {
    className: isInvertCam ? 'videoRecord inverted' : 'videoRecord',
    style: {
      width: (aspectArea === null || aspectArea === void 0 ? void 0 : aspectArea.width) + "px",
      height: (aspectArea === null || aspectArea === void 0 ? void 0 : aspectArea.height) + "px"
    }
  }, /*#__PURE__*/React.createElement(VideoRecorder, {
    isOnInitially: true,
    wrapperClassName: "video-record-item",
    timeLimit: 60000,
    onRecordingComplete: setVideoBlob,
    renderActions: function renderActions(_ref) {
      var isRecording = _ref.isRecording,
          isCameraOn = _ref.isCameraOn,
          streamIsReady = _ref.streamIsReady,
          isRunningCountdown = _ref.isRunningCountdown,
          isReplayingVideo = _ref.isReplayingVideo,
          countdownTime = _ref.countdownTime,
          timeLimit = _ref.timeLimit,
          onStartRecording = _ref.onStartRecording,
          onStopRecording = _ref.onStopRecording,
          onStopReplaying = _ref.onStopReplaying;
      return /*#__PURE__*/React.createElement(React.Fragment, null, isRecording && /*#__PURE__*/React.createElement(Timer, {
        timeLimit: timeLimit
      }), isRunningCountdown && /*#__PURE__*/React.createElement(Countdown, {
        countdownTime: countdownTime
      }), isRecording && /*#__PURE__*/React.createElement("button", {
        className: "btn-stop-record btn-solid-red",
        onClick: function onClick() {
          onStopRecording();
        }
      }, /*#__PURE__*/React.createElement(RiStopCircleLine, {
        className: "ri-icon",
        size: "16"
      }), "STOP"), isRecording == false && isRunningCountdown != true && isCameraOn && streamIsReady && /*#__PURE__*/React.createElement("button", {
        className: "btn-start-record btn-solid-green",
        onClick: function onClick() {
          onRecording(true);
          onStartRecording();
        }
      }, /*#__PURE__*/React.createElement(RiRecordCircleLine, {
        className: "ri-icon",
        size: "16px"
      }), "RECORD"), isReplayingVideo && /*#__PURE__*/React.createElement("button", {
        className: "btn-delete-record btn-solid-red",
        onClick: function onClick() {
          onRecording(false);
          onStopReplaying();
          setVideoBlob();
        }
      }, /*#__PURE__*/React.createElement(RiDeleteBin6Line, {
        className: "ri-icon",
        size: "16px"
      }), "DISCARD"), videoBlob && /*#__PURE__*/React.createElement("button", {
        className: "btn-submit-record btn-solid-green",
        onClick: function onClick() {
          onSubmit(videoBlob);
          onStopReplaying();
          setVideoBlob();
        }
      }, /*#__PURE__*/React.createElement(BiRightArrowCircle, {
        className: "ri-icon",
        size: "20px"
      }), "SUBMIT"));
    }
  }));
};

export default VideoRecord;