import {useContext, useEffect} from 'react';

import addKeyListener from '@/add-key-listener.js';
import {ACTION_MAP, RESOLUTION} from '@/constants.js';
import ClientContext from '@/context/client.js';

import Dom from './dom.jsx';
import HotBar from './hotbar.jsx';
import Pixi from './pixi.jsx';
import styles from './ui.module.css';

const ratio = RESOLUTION.x / RESOLUTION.y;

const KEY_MAP = {
  keyDown: 1,
  keyUp: 0,
};

export default function Ui() {
  // Key input.
  const client = useContext(ClientContext);
  useEffect(() => {
    return addKeyListener(document.body, ({type, payload}) => {
      if (type in KEY_MAP && payload in ACTION_MAP) {
        client.send({
          type: 'Action',
          payload: {
            type: ACTION_MAP[payload],
            value: KEY_MAP[type],
          },
        });
      }
    });
  });
  return (
    <div className={styles.ui}>
      <style>
        {`
          @media (max-aspect-ratio: ${ratio}) { .${styles.ui} { width: 100%; } }
          @media (min-aspect-ratio: ${ratio}) { .${styles.ui} { height: 100%; } }
        `}
      </style>
      <Pixi />
      <Dom>
        <HotBar active={0} slots={Array(10).fill(0).map(() => {})} />
      </Dom>
    </div>
  );
}