// 3rd party.
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import {usePropertyChange} from '../hooks/use-property-change';

const decorate = compose(
  contempo(`
.timers {
  left: 164px;
  position: absolute;
  color: white;
  font-size: 4px;
  font-family: monospace;
  top: 4px;
  border: 1px solid white;
  padding: 2px;
}
.tps:before {
  content: 'TPS: ';
}
.rps:before {
  content: 'RPS: ';
}
.count {
  margin-right: 2px;
}
.jitter::before {
  content: '+/-: ';
}
.down, .up {
  display: inline-block;
  width: 12px;
}
.down {
  margin-right: 2px;
}
.up {
  margin: 0px 2px;
}
  `),
);

const TimersComponent = ({app}) => {
  const tpsCount = usePropertyChange(app.tps, 'count', 0);
  const tpsJitter = usePropertyChange(app.tps, 'jitter', [0, 0]);
  const rpsCount = usePropertyChange(app.rps, 'count', 0);
  const rpsJitter = usePropertyChange(app.rps, 'jitter', [0, 0]);
  return <div className="timers unselectable">
    <div className="tps">
      <span className="count">{tpsCount}</span>
      <span className="jitter"><span className="down">{tpsJitter[1]}</span>/<span className="up">{tpsJitter[0]}</span></span>
    </div>
    <div className="rps">
      <span className="count">{rpsCount}</span>
      <span className="jitter"><span className="down">{rpsJitter[1]}</span>/<span className="up">{rpsJitter[0]}</span></span>
    </div>
  </div>;
}

export default decorate(TimersComponent);