import { observer } from 'mobx-react-lite';
import type { GameStore } from '../game/GameStore';
import type { Rabbit } from '../game/entities/Rabbit';
import { RABBIT_NIGHT_SPRITE, RABBIT_SPRITE } from '../game/sprites';
import HealthBar from './HealthBar';
import PixelSprite from './PixelSprite';

const RABBIT_SIZE = 30;

const RabbitEntity = observer(function RabbitEntity({ rabbit, store }: { rabbit: Rabbit; store: GameStore }) {
  const size = store.isBloodMoon ? RABBIT_SIZE * 2 : RABBIT_SIZE;

  return (
    <div>
      <div
        className="entity rabbit-shadow"
        style={{ left: rabbit.x, top: rabbit.y, width: size, height: size / 2, marginTop: size * 0.6 }}
      />
      <div
        className={`entity rabbit ${rabbit.hitFlashTimer > 0 ? 'chopping' : ''}`}
        style={{ left: rabbit.x, top: rabbit.y - rabbit.z, zIndex: Math.floor(rabbit.y - rabbit.z) }}
        data-rabbit-id={rabbit.id}
      >
        <PixelSprite pixels={store.isNight ? RABBIT_NIGHT_SPRITE : RABBIT_SPRITE} size={size} />
      </div>
      {rabbit.hp < store.rabbitMaxHp && (
        <HealthBar x={rabbit.x} y={rabbit.y - rabbit.z - size * 0.5 - 6} ratio={rabbit.hp / store.rabbitMaxHp} />
      )}
    </div>
  );
});

export default RabbitEntity;