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

/**
 * The hotbar. 10 slots of inventory with an active selection.
 */
export default function Hotbar({active, onActivate, slots}) {
  const Slots = slots.map((slot, i) => (
    <div
      className={
        [styles.slotWrapper, active === i && styles.active]
          .filter(Boolean).join(' ')
      }
      key={i}
    >
      <Slot
        onClick={() => onActivate(i)}
        onDragOver={(event) => {
          event.preventDefault();
        }}
        onDragStart={(event) => {
          if (!slot) {
            event.preventDefault();
          }
          event.dataTransfer.setData('silphius/item', i);
          onActivate(i);
        }}
        onDrop={(event) => {
          event.preventDefault();
          onActivate(i);
        }}
        {...slot}
      />
    </div>
  ));
  return (
    <div
      className={styles.hotbar}
    >
      {Slots}
    </div>
  );
}