import styles from './bag.module.css';
import Slot from './slot.jsx';

/**
 * Inventory bag. 10-40 slots of inventory.
 */
export default function Bag({
  isInventoryOpen,
  slots,
}) {
  const Slots = slots.map((slot, i) => (
    <div
      className={
        [styles.slotWrapper]
          .filter(Boolean).join(' ')
      }
      key={i}
    >
      <Slot
        icon={slot?.icon}
        // onMouseDown={(event) => {
        //   onActivate(i)
        //   event.stopPropagation();
        // }}
        // onMouseUp={(event) => {
        //   event.stopPropagation();
        // }}
        // onDragOver={(event) => {
        //   event.preventDefault();
        // }}
        // onDragStart={(event) => {
        //   if (!slot) {
        //     event.preventDefault();
        //   }
        //   event.dataTransfer.setData('silphius/item', i);
        //   onActivate(i);
        // }}
        // onDrop={(event) => {
        //   event.preventDefault();
        //   onActivate(i);
        // }}
        qty={slot?.qty}
      />
    </div>
  ));
  return (
    <div
      className={styles.bag}
      style={isInventoryOpen ? {transition: 'none'} : {left: '-440px'}}
    >
      {Slots}
    </div>
  );
}