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

const decorate = compose(
  contempo(`
.self-entity {
  background-color: rgba(0, 0, 0, .3);
  border: 1px solid white;
  color: white;
  font-size: 0.8em;
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  line-height: 1em;
  width: 10em;
  padding: 0.125em;
  font-family: monospace;
}
.location {
}
.x {
  display: inline-block;
  width: 5em;
}
.y {
  display: inline-block;
  width: 4.125em;
}
.x:before {
  content: 'x: ';
}
.y:before {
  content: 'y: ';
}
  `),
);

const SelfEntityComponent = ({app}) => {
  const selfEntity = useSelfEntity(app);
  const position = usePropertyChange(selfEntity, 'position', [0, 0]);
  const roundedPosition = Vector.round(position);
  return <div className="self-entity unselectable">
    <div className="location">
      <div className="x">{roundedPosition[0]}</div>
      <div className="y">{roundedPosition[1]}</div>
    </div>
  </div>;
}

export default decorate(SelfEntityComponent);