// 3rd party.
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import {WorldTime} from '../../common/world-time';

const decorate = compose(
  contempo(`
.throughput {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  font-size: 0.6em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  line-height: 1em;
  width: 11em;
  padding: 0.5em;
  font-family: monospace;
}
.throughput .input:before {
  content: 'kbps \\a0in: ';
}
.throughput .output:before {
  content: 'kbps out: ';
}
.throughput p {
  margin: 0.25em;
}
  `),
);

const formatKbps = (bytes) => {
  const bps = bytes * 8;
  const kbps = bps / 1000;
  return Math.floor(kbps * 100) / 100;
}

const ThroughputComponent = ({ticker}) => {
  const [throughput, setThroughput] = useState([0, 0]);
  useEffect(() => {
    const updater = (throughput) => {
      setThroughput(throughput);
    };
    ticker.on('updateThroughput', updater);
    return () => {
      ticker.off('updateThroughput', updater);
    };
  }, []);
  return <div className="throughput unselectable">
    <p className="input">{formatKbps(throughput[0])}</p>
    <p className="output">{formatKbps(throughput[1])}</p>

  </div>;
}

export default decorate(ThroughputComponent);