// 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(`
.time {
  background-color: rgba(0, 0, 0, .3);
  border: 0.5px solid gray;
  border-radius: 50px;
  color: white;
  position: absolute;
  top: 5px;
  right: 5px;
  line-height: 1em;
  padding: 0.5em;
  font-family: monospace;
}
  `),
);

const WorldTimeComponent = ({ticker}) => {
  const [time, setTime] = useState('--:-- --');
  useEffect(() => {
    const updater = (hour) => {
      setTime(WorldTime.format(hour));
    };
    ticker.on('updateTime', updater);
    return () => {
      ticker.off('updateTime', updater);
    };
  }, []);
  return <div className="time unselectable">{time}</div>;
}

export default decorate(WorldTimeComponent);