// 3rd party.
import classnames from 'classnames';
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import Hotbar from './hotbar';
import Inventory from './inventory';
import WorldTime from './world-time';

const decorate = compose(
  contempo(`
.menu {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.menu-inner {
  transition: transform 0.25s;
  will-change: transform;
}
.menu-inner.open {
  transform: translateY(156px);
}
  `),
);

const MenuComponent = ({app}) => {
  const [opened, setOpened] = useState(false);
  useEffect(() => {
    const onMenuOpenedChanged = () => {
      setOpened(app.isMenuOpened);
    }
    onMenuOpenedChanged();
    app.on('isMenuOpenedChanged', onMenuOpenedChanged);
    return () => {
      app.off('isMenuOpenedChanged', onMenuOpenedChanged);
    };
  }, []);
  return <div className="menu unselectable">
    <div className={classnames(
    'menu-inner',
    opened ? 'open' : '',
  )}>
      <Inventory />
      <WorldTime worldTime={app.worldTime} />
      <Hotbar />
    </div>
  </div>;
}

export default decorate(MenuComponent);