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

const decorate = compose(
  contempo(`
.status {
  color: white;
  display: inline-block;
  font-family: monospace;
  font-size: 6px;
  line-height: normal;
  text-shadow: 0.5px 0.5px 0px black;
  position: absolute;
  top: 5px;
  right: 262px;
}
.status .health {
}
.status .health-inner {
  box-shadow:
    -.5px -.5px 0 rgba(0, 0, 0, 1),
     .5px  .5px 0 rgba(0, 0, 0, 1),
    -.5px  .5px 0 rgba(0, 0, 0, 1),
     .5px -.5px 0 rgba(0, 0, 0, 1)
  ;
  display: inline-block;
  padding: 1px 3px;
  line-height: 6px;
}
.status .currency {
}
.status .health:before {
  content: '♥️ ';
  opacity: 0.75;
  color: red;
}
  `),
);

const QuickStatusComponent = ({app}) => {
  const selfEntity = useSelfEntity(app);
  const life = usePropertyChange(selfEntity, 'life', 0);
  const maxLife = usePropertyChange(selfEntity, 'maxLife', 0);
  const width = life / maxLife;
  const multiplier = maxLife / life;
  const gradient = [
    'to right',
    'rgba(255, 0, 0, 0.75)',
  ];
  const yellowStart = multiplier * 0.25;
  if (yellowStart <= 1) {
    gradient.push(...[
      `${yellowStart * 100}%`,
      'rgba(255, 255, 0, 0.75)',
    ])
  }
  const greenStart = multiplier * 0.75;
  if (greenStart <= 1) {
    gradient.push(...[
      `${greenStart * 100}%`,
      'rgba(0, 255, 0, 0.75)',
    ])
  }
  if (2 === gradient.length) {
    gradient.push('rgba(255, 0, 0, 0.75)');
  }
  return <div className="status">
    <div className="health">
      <div className="health-inner" style={{
        backgroundRepeat: 'no-repeat',
        backgroundImage: `linear-gradient(${gradient.join(', ')})`,
        backgroundSize: `${width * 100}% 100%`,
      }}>
        <span className="life">
          {life}
        </span>
        /
        <span className="max-life">
          {maxLife}
        </span>
      </div>
    </div>
  </div>;
}

export default decorate(QuickStatusComponent);