// 3rd party.
import React 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(`
.damage {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.particle .text {
  display: inline-block;
  font-family: monospace;
  font-size: 0.6em;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0px black;
}
.particle .text.fire.is-damage {
  color: #FFA500;
  text-shadow:
    0.5px 0.5px black,
    -0.125px -0.125px black,
    -0px -0px 3px #FFDD00,
    -0px -0px 10px #FFFF00
  ;
}
.particle .text.is-healing {
  color: #00FF77;
  text-shadow: -0.25px -0.25px 0px #0077FF, 0.5px 0.5px black;
  text-shadow:
    0.5px 0.5px black,
    -0.125px -0.125px black,
    -0px -0px 3px #00DDFF,
    -0px -0px 10px #0000FF
  ;
}
  `),
);

const DamageComponent = ({app}) => {
  const camera = usePropertyChange(app.stage, 'camera');
  const areaSize = usePropertyChange(camera, 'areaSize', [0, 0]);
  const realOffset = usePropertyChange(camera, 'realOffset', [0, 0]);
  return <div
    className="damage unselectable"
    style={{
      transform: `translate(-${realOffset[0]}px, -${realOffset[1]}px)`,
      width: `${areaSize[0]}px`,
      height: `${areaSize[1]}px`,
    }}
  ></div>;
}

export default decorate(DamageComponent);