// 3rd party.
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import {Vector} from '@avocado/math';
import contempo from 'contempo';

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;
  top: calc(180px + 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, setSelfEntity] = useState();
  const [position, setPosition] = useState([0, 0]);
  useEffect(() => {
    const onSelfEntityChanged = () => {
      setSelfEntity(app.selfEntity);
      setPosition(app.selfEntity.position);
    };
    app.on('selfEntityChanged', onSelfEntityChanged);
    return () => {
      app.off('selfEntityChanged', onSelfEntityChanged);
    }
  }, [selfEntity]);
  useEffect(() => {
    if (!selfEntity) {
      return;
    }
    const onPositionChanged = () => {
      setPosition(selfEntity.position);
    };
    selfEntity.on('positionChanged', onPositionChanged);
    return () => {
      selfEntity.off('positionChanged', onPositionChanged);
    };
  }, [position]);
  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);