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

/**
 * Inventory grid.
 */
export default function Grid({
  active = -1,
  color,
  columns,
  label,
  onActivate,
  slots,
}) {
  const Slots = slots.map((slot, i) => (
    <div
      className={
        [styles.slot, active === i && styles.active]
          .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.gridWrapper}>
      <p className={styles.label}>{label}</p>
      <div
        className={styles.grid}
        style={{
          '--color': color,
          '--columns': columns,
        }}
      >
        <div
          className={styles.innerGrid}
        >
          {Slots}
        </div>
      </div>

    </div>
  );
}