/* eslint-disable react/jsx-indent */

import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import ProgressBar from 'progressbar.js';

import './LoadingBar.scss';

// Uses progressbar.js directly through a ref, replacing the react-progress-bar.js
// wrapper (which relied on the deprecated findDOMNode).
const LoadingBar = ({ progress }) => {
  const elRef = useRef(null);
  const barRef = useRef(null);

  const status = Meteor.status();
  const target = status.status !== 'connected' ? status.retryCount / 10 : progress;
  const clamped = Math.max(0, Math.min(1, target));

  useEffect(() => {
    barRef.current = new ProgressBar.Line(elRef.current, {
      strokeWidth: 2,
      color: '#5A7636'
    });
    return () => {
      if (barRef.current) barRef.current.destroy();
      barRef.current = null;
    };
  }, []);

  useEffect(() => {
    if (barRef.current) barRef.current.animate(clamped);
  }, [clamped]);

  return (
    <div className="loading-bar">
      <div ref={elRef} />
    </div>
  );
};

LoadingBar.propTypes = {
  progress: PropTypes.number.isRequired
};

export default LoadingBar;