// 3rd party.
import classnames from 'classnames';
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import Throughput from './throughput';

const decorate = compose(
  contempo(`
.connection {
  background-color: rgba(0, 0, 0, .3);
  border: 1px solid white;
  color: white;
  position: absolute;
  top: 0.5em;
  left: calc(320px + 0.5em);
  line-height: 1em;
  padding: 0.125em;
  font-family: monospace;
}
.connection > p {
  border-bottom: 1px solid rgb(180, 180, 180);
  margin: 0.25em;
  padding-bottom: 0.25em;
  text-transform: uppercase;
}
.connection > p.connected {
  color: rgb(0, 255, 0);
}
.connection > p.not-connected {
  color: rgb(255, 0, 0);
}
  `),
);

const ConnectionComponent = ({
  Parser,
  socket,
}) => {
  const [isConnected, setIsConnected] = useState(false);
  // Juggle connected state.
  useEffect(() => {
    setIsConnected(socket.isConnected);
    const onConnect = () => {
      setIsConnected(true);
    };
    socket.on('connect', onConnect);
    const onDisconnect = () => {
      setIsConnected(false);
    };
    socket.on('disconnect', onDisconnect);
    return () => {
      socket.off('connect', onConnect);
      socket.off('disconnect', onDisconnect);
    };
  }, []);
  return <div className="connection unselectable">
    <p className={classnames(
      isConnected ? 'connected' : 'not-connected',
      'status',
    )}>{isConnected ? 'connected' : 'not connected'}</p>
    <Throughput Parser={Parser} />
  </div>;
}

export default decorate(ConnectionComponent);