/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { useTracker } from 'meteor/react-meteor-data';
import { withTranslation } from 'react-i18next';

// Native-React reconnection banner. Replaces the Blaze `meteorStatus` template
// (rendered through gadicc:blaze-react-component, which used the deprecated
// findDOMNode). Behaviour mirrors 255kb:meteor-status; its CSS (.meteor-status)
// is still provided by that package.
const Reconnect = ({ t }) => {
  const status = useTracker(() => Meteor.status(), []);
  const [nextRetry, setNextRetry] = useState(0);

  useEffect(() => {
    if (status.status !== 'waiting') return undefined;
    const tick = () => setNextRetry(Math.round((status.retryTime - Date.now()) / 1000));
    tick();
    const id = Meteor.setInterval(tick, 1000);
    return () => Meteor.clearInterval(id);
  }, [status.status, status.retryTime]);

  const show = !status.connected && status.status !== 'offline' && status.retryCount > 2;
  if (!show) return <div />;

  const connecting = status.status === 'connecting' || nextRetry === 0;
  const message = connecting
    ? t('Desconectado del servidor, reconectando...')
    : t('Desconectado del servidor, reconectando en %delay% segundos.').replace('%delay%', nextRetry);

  const onRetry = (e) => {
    e.preventDefault();
    if (status.status !== 'connecting') Meteor.reconnect();
  };

  return (
    <div className="meteor-status meteor-status-overlay">
      {message}
      {!connecting && <span> <a href="#" className="meteor-status-retry" onClick={onRetry}>{t('Reintentar ahora')}</a></span>}
    </div>
  );
};

Reconnect.propTypes = {
  t: PropTypes.func.isRequired
};

export default withTranslation()(Reconnect);