import { Sprite } from './entity.js';
import { LANE_COLORS, getPixelsPerBeat } from './config.js';
import { KeyHint } from './ui.js';

class BeatLine extends Sprite {
  constructor() {
    super((700 - 300) / 2, 40)
  }

  draw() {
    stroke(190)
    strokeWeight(1)
    line(this.x, this.y, this.x + 300, this.y)
  }
}

export class PressIndicator extends Sprite {
  constructor(lane) {
    super(((width - 300) / 2) + (75*lane), height - 40 - 24);

    this.heldFor = 0;

    this.laneTransparency = 0
    this.transparency = 0
    this.hit = false;
  }

  draw(held) {
    // console.log("hf", this.heldFor, held)
    if(held) {
      if(this.hit) {
        blur(color(255,255,255), 16)
        if(this.heldFor == 0) {
          this.transparency = 255
          this.laneTransparency = 100
        } else {
          this.transparency = lerp(this.transparency, 50, 0.2)
        }
      } else {
        this.transparency = lerp(this.transparency, 50, 0.6);
      }
    } else {
      this.transparency = lerp(this.transparency, 0, 0.5)
    }

    fill(255, 255, 255, this.transparency)
    noStroke()
    rect(this.x, this.y, 75, 24)


    // lane
    this.laneTransparency = lerp(this.laneTransparency, 0, 0.05)
    fill(255, 255, 255, this.laneTransparency)
    noStroke()
    rect(this.x, 0, 75, height)

    if(this.hit) {
      blur(0, 0)
    }

    if(!held && this.heldFor > 0)
      this.heldFor = 0;

    if(held)
      this.heldFor += 1;

    if(this.hit && held)
      this.hit = false;
  }
}

export class Highway extends Sprite {
  constructor() {
    super(0,0)
  }

  static draw(curBeat) {
    noStroke()
    blur(color(20), 16)
    fill(140)
    rect((width - 300) / 2, 0, 300, height)
    blur(0, 0)
  
    fill(80)
    rect((width - 300) / 2, height - 28 - 12, 300, 28 + 12)
  
    // purple bar
    for(let i = 0; i < LANE_COLORS.length; i++) {
      let c = color(LANE_COLORS[i][0], LANE_COLORS[i][1], LANE_COLORS[i][2])
      fill(lerpColor(c, color(0), 0.5))
      rect((width - 300) / 2 + ((300/4) * i), height - 28 - 24 - 12, (300 / 4), 24)
    }

    // Lines
    let PIXELS_PER_BEAT = getPixelsPerBeat();
    let beatLineX = height - 40
    while(beatLineX > 0) {
      stroke(170);
      strokeWeight(2);
      line(
        (width - 300) / 2, 
        beatLineX + (PIXELS_PER_BEAT * (curBeat % 1) - 1), 
        (width - 300) / 2 + 300, 
        beatLineX + (PIXELS_PER_BEAT * (curBeat % 1) - 1)
      );
      beatLineX -= PIXELS_PER_BEAT;
    }

    KeyHint.draw("D", (width/2) + 182 - (300 / 4)*4, height - 14)
    KeyHint.draw("F", (width/2) + 182 - (300 / 4)*3, height - 14)
    KeyHint.draw("J", (width/2) + 182 - (300 / 4)*2, height - 14)
    KeyHint.draw("K", (width/2) + 182 - (300 / 4)*1, height - 14)
  }
}