// 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 Connection from './connection';

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

const DebugUi = ({
  actionRegistry,
  app,
  socket,
  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('displaySizeChanged', onStageResized);
    };
  }, []);
  // F2 toggle debug.
  useEffect(() => {
    const onIsDebuggingChanged = () => {
      setIsDebugging(app.isDebugging);
    };
    app.on('isDebuggingChanged', onIsDebuggingChanged);
    return () => {
      app.off('isDebuggingChanged', onIsDebuggingChanged);
    };
  }, [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],
      }}
    >
      <Connection Parser={Parser} socket={socket} />
      {/* <SelfEntity app={app} /> */}
    </div>
  </div>;
};

export default decorate(DebugUi);