// 3rd party.
import React, {useEffect, useState} from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';
// 1st party.
import ItemSlot from './item-slot';

const decorate = compose(
  contempo(`
.inventory {
  position: absolute;
  left: 50%;
  transform: translateY(-80px);
}
.inventory-inner {
  width: 250px;
  height: 150px;
  position: relative;
  transform: translateX(-50%);
}
.bag, .equipment {
  position: absolute;
}
.bag {
  width: 200px;
  height: 80px;
  transform: translateX(25px);
}
.equipment {
  width: 20px;
  height: 80px;
  transform: translateX(0px);
}
  `),
);

const InventoryComponent = ({worldTime}) => {
  const bagSlots = [];
  for (let i = 0; i < 40; ++i) {
    bagSlots.push(<ItemSlot key={i} />);
  }
  const equipmentSlots = [];
  for (let i = 0; i < 4; ++i) {
    equipmentSlots.push(<ItemSlot key={i} />);
  }
  return <div className="inventory unselectable">
    <div className="inventory-inner">
      <div className="bag">{bagSlots}</div>
      <div className="equipment">{equipmentSlots}</div>
    </div>
  </div>;
}

export default decorate(InventoryComponent);