// 3rd party.
import React, {useEffect, useState} from 'react';
import {hot} from 'react-hot-loader/root';
// 2nd party.
import {compose} from '@avocado/core';
import {Vector} from '@avocado/math';
import contempo from 'contempo';
// 3rd party.
import SelfEntity from './self-entity';
import Throughput from './throughput';

const decorate = compose(
  contempo(``),
  hot,
);

const DebugUi = ({
  actionRegistry,
  app,
  stage,
  Parser,
}) => {
  const [size, setSize] = useState([0, 0]);
  const [position, setPosition] = useState([0, 0]);
  const [transformRatio, setTransformRatio] = useState(1);
  const [isDebugging, setIsDebugging] = useState(false);
  // Sync debug UI size with stage size.
  useEffect(() => {
    const onStageResized = (size) => {
      const rect = stage.element.getBoundingClientRect();
      setPosition([rect.left, rect.top]);
      setSize(size);
      setTransformRatio(stage.transformRatio);
    };
    stage.on('displaySizeChanged', onStageResized);
    onStageResized(stage.displaySize);
    return () => {
      stage.off('resized', onStageResized);
    };
  }, []);
  // F2 toggle debug.
  useEffect(() => {
    const onKeyDown = (event) => {
      event = event || window.event;
      if ('F2' === event.key) {
        setIsDebugging(!isDebugging);
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => {
      window.removeEventListener('keydown', onKeyDown);
    };
  }, [isDebugging]);
  // Scale stage when debugging.
  useEffect(() => {
    stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`;
  }, [isDebugging]);
  return <div
    className="debug"
    style={{
      display: Vector.isNull(size) ? 'none': 'block',
      left: position[0],
      top: position[1],
      width: size[0],
      height: size[1],
      position: 'absolute',
    }}
  >
    <div
      className="ui"
      style={{
        transform: `scale(${1 / transformRatio})`,
        transformOrigin: '0 0',
        width: stage.size[0],
        height: stage.size[1],
      }}
    >
      <Throughput Parser={Parser} />
      <SelfEntity app={app} />
    </div>
  </div>;
};

export default decorate(DebugUi);