class Oceano {
  constructor(width, height, celdaSize, sprites) {
    this.sprites = sprites;
    this.celdaSize = celdaSize;
    this.filas = Math.floor(height / celdaSize);
    this.columnas = Math.floor(width / celdaSize);
    this.nFramesAnim = 3;
    this.animFrame = 0;
    this.gameFrame = 0;

    this.lastColumnIndex = this.columnas - 1;
    this.lastRowIndex = this.filas - 1;
    this.lastColumnX = this.lastColumnIndex * this.celdaSize;
    this.lastRowY = this.lastRowIndex * this.celdaSize;
  }

  update() {}

  draw(ctx) {
    this.animFrame = Math.floor(this.gameFrame / 10) % this.nFramesAnim;
    this.gameFrame++;
    const frame = this.animFrame * 9;

    // Dibujar los bordes superior e inferior
    ctx.drawImage(this.sprites[0 + frame], 0, 0);
    ctx.drawImage(this.sprites[2 + frame], this.lastColumnX, 0);
    ctx.drawImage(this.sprites[6 + frame], 0, this.lastRowY);
    ctx.drawImage(this.sprites[8 + frame], this.lastColumnX, this.lastRowY);

    // Dibujar los bordes laterales
    for (let y = 1; y < this.lastRowIndex; y++) {
      ctx.drawImage(this.sprites[3 + frame], 0, y * this.celdaSize);
      ctx.drawImage(
        this.sprites[5 + frame],
        this.lastColumnX,
        y * this.celdaSize
      );
    }
    for (let x = 1; x < this.lastColumnIndex; x++) {
      ctx.drawImage(this.sprites[1 + frame], x * this.celdaSize, 0);
      ctx.drawImage(this.sprites[7 + frame], x * this.celdaSize, this.lastRowY);
    }
    // Dibujar el contenido interno
    for (let y = 1; y < this.lastRowIndex; y++) {
      for (let x = 1; x < this.lastColumnIndex; x++) {
        ctx.drawImage(this.sprites[4], x * this.celdaSize, y * this.celdaSize);
      }
    }
  }
}

export default Oceano;