import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.number.constructor.js";
import "core-js/modules/web.timers.js";
import React from 'react';
import { cnCreate } from '@megafon/ui-helpers';
import AudioRange from "./AudioRange";
import useTrackDuration from "./hooks/useTrackDuration";
import timerFormat from "./timerFormatUtil";
import "./style/AudioProgress.css";
export var INTERVAL_DELAY = 1000;
var cn = cnCreate('mfui-audio-progress');
var AudioProgress = function AudioProgress(_ref) {
  var audioRef = _ref.audioRef,
    audioTitle = _ref.audioTitle,
    isPlaying = _ref.isPlaying,
    isPause = _ref.isPause,
    onChangeAudioCurrentTime = _ref.onChangeAudioCurrentTime,
    onPlay = _ref.onPlay,
    onSetIsPlaying = _ref.onSetIsPlaying;
  var intervalId = React.useRef(null);
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    trackProgress = _React$useState2[0],
    setTrackProgress = _React$useState2[1];
  var trackDuration = useTrackDuration(audioRef);
  var progressColorPercent = React.useMemo(function () {
    return trackProgress / trackDuration * 100;
  }, [trackDuration, trackProgress]);
  var progressValue = React.useMemo(function () {
    return isPlaying || isPause ? trackProgress : trackDuration;
  }, [isPause, isPlaying, trackDuration, trackProgress]);
  var handleStartTimer = React.useCallback(function () {
    intervalId.current && clearInterval(intervalId.current);
    intervalId.current = setInterval(function () {
      var _a, _b, _c;
      if ((_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.ended) {
        onSetIsPlaying === null || onSetIsPlaying === void 0 ? void 0 : onSetIsPlaying(false);
        setTrackProgress(Math.floor(((_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.duration) || 0));
        return;
      }
      setTrackProgress(Math.floor(((_c = audioRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) || 0));
    }, INTERVAL_DELAY);
  }, [audioRef, onSetIsPlaying]);
  var handleScrubProgress = function handleScrubProgress(e) {
    var currentTime = Number(e.target.value);
    setTrackProgress(currentTime);
    onChangeAudioCurrentTime === null || onChangeAudioCurrentTime === void 0 ? void 0 : onChangeAudioCurrentTime(currentTime);
  };
  var handleScrubEndProgress = function handleScrubEndProgress() {
    if (!isPlaying) {
      onPlay === null || onPlay === void 0 ? void 0 : onPlay();
    }
    handleStartTimer();
  };
  React.useEffect(function () {
    var _a;
    setTrackProgress(Math.floor(((_a = audioRef === null || audioRef === void 0 ? void 0 : audioRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) || 0));
  }, [audioRef]);
  React.useEffect(function () {
    if (isPlaying) {
      handleStartTimer();
    }
    if (isPause) {
      intervalId.current && clearInterval(intervalId.current);
    }
  }, [handleStartTimer, isPause, isPlaying]);
  React.useEffect(function () {
    return function () {
      intervalId.current && clearInterval(intervalId.current);
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    className: cn()
  }, /*#__PURE__*/React.createElement("div", {
    className: cn('info')
  }, /*#__PURE__*/React.createElement("span", {
    className: cn('title')
  }, audioTitle), /*#__PURE__*/React.createElement("span", {
    className: cn('value')
  }, timerFormat(progressValue))), /*#__PURE__*/React.createElement("div", {
    className: cn('range-wrapper')
  }, /*#__PURE__*/React.createElement(AudioRange, {
    className: cn('range'),
    maxValue: trackDuration,
    value: trackProgress,
    step: "1",
    colorPercent: progressColorPercent || 0,
    onChange: handleScrubProgress,
    onMouseUp: handleScrubEndProgress,
    onTouchEnd: handleScrubEndProgress,
    dataAttrs: {
      'data-testid': 'AudioTimeRange'
    }
  })));
};
export default AudioProgress;