// 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';
// 1st party.
import {usePropertyChange} from '../hooks/use-property-change';
import SelfEntity from './self-entity';
import Timers from './timers';

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

const DebugUi = ({
  app,
}) => {
  const [size, setSize] = useState([0, 0]);
  const [position, setPosition] = useState([0, 0]);
  const [transformRatio, setTransformRatio] = useState(1);
  const isDebugging = usePropertyChange(app, 'isDebugging', false);
  // Sync debug UI size with stage size.
  useEffect(() => {
    const onStageResized = (size) => {
      const rect = app.stage.element.getBoundingClientRect();
      setPosition([rect.left, rect.top]);
      setSize(size);
      setTransformRatio(app.stage.transformRatio);
    };
    app.stage.on('displaySizeChanged', onStageResized);
    onStageResized(app.stage.displaySize);
    return () => {
      app.stage.off('displaySizeChanged', onStageResized);
    };
  }, []);
  // Scale stage when debugging.
  useEffect(() => {
    app.stage.element.style.transform = `scale(${isDebugging ? '0.5' : '1'})`;
  }, [isDebugging]);
  return isDebugging && <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: app.stage.size[0],
        height: app.stage.size[1],
      }}
    >
      <Timers app={app} />
      <SelfEntity app={app} />
    </div>
  </div>;
};

export default decorate(DebugUi);