// class StarrySky {
//   canvas: HTMLCanvasElement
//   ctx: CanvasRenderingContext2D
//   particles: Particle[]
//   count: number
//   // actions: string[]
//   // action: number
//   constructor() {
//     this.canvas = document.createElement('canvas') as HTMLCanvasElement
//     this.canvas.width = innerWidth
//     this.canvas.height = innerHeight
//     this.canvas.style.zIndex = '-1'
//     this.canvas.style.position = 'fixed'
//     this.canvas.style.top = '0'
//     this.canvas.style.left = '0'
//     this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
//     document.body.appendChild(this.canvas)

//     this.particles = []
//     this.count = 1000

//     // this.animate()
//   }
//   draw() {
//     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
//     if (this.particles.length < this.count) {
//       this.particles.push(new Particle(this.canvas.width, this.canvas.height, this.ctx))
//     }
//     for (let i in this.particles) {
//       const p = this.particles[i]
//       p.update()
//       p.draw()
//     }
//   }
// }

// class Particle {
//   x: number
//   y: number
//   vx: number
//   w: number
//   h: number
//   ctx: CanvasRenderingContext2D
//   constructor(width: number, height: number, ctx: CanvasRenderingContext2D) {
//     this.w = width
//     this.h = height
//     this.ctx = ctx
//     this.x = Math.random() * width
//     this.y = Math.random() * height
//     this.vx = Math.random()
//   }
//   update() {
//     this.x += this.vx * 3
//     if (this.x > this.w) {
//       this.x = 0
//     }
//   }
//   draw() {
//     this.ctx.beginPath()
//     this.ctx.arc(this.x, this.y, 1 + this.vx, 0, Math.PI * 2)
//     this.ctx.fillStyle = `rgba(255, 255, 255, ${this.vx})`
//     this.ctx.fill()
//   }
// }

// export default StarrySky

class StarrySky {
  canvas: HTMLCanvasElement
  ctx: CanvasRenderingContext2D
  particles: Particle[]
  count: number
  constructor() {
    this.canvas = document.createElement('canvas')
    this.canvas.width = innerWidth
    this.canvas.height = innerHeight
    this.canvas.style.zIndex = '-1'
    this.canvas.style.position = 'fixed'
    this.canvas.style.top = '0'
    this.canvas.style.left = '0'
    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
    document.body.appendChild(this.canvas)

    this.particles = []
    this.count = 1000

    this.animate()
    this.draw()
  }
  draw() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    for (let i = 0; i < this.count; i++) {
      this.particles.push(new Particle(this.canvas.width, this.canvas.height, this.ctx))
      const p = this.particles[i]
      p.draw()
    }
  }
  onresize() {
    window.onresize = () => {
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
      this.draw()
    }
  }
  shanshuo() {
    let index = Math.ceil(Math.random() * this.count)
    this.particles.splice(0, index + 5)
    if (this.particles.length < this.count) {
      let particle = new Particle(this.canvas.width, this.canvas.height, this.ctx)
      this.particles.push(particle)
      particle.draw()
    }
  }
  animate() {
    requestAnimationFrame(() => this.animate())
    this.shanshuo()
  }
}

class Particle {
  x: number
  y: number
  vx: number
  w: number
  h: number
  ctx: CanvasRenderingContext2D
  constructor(width: number, height: number, ctx: CanvasRenderingContext2D) {
    this.w = width
    this.h = height
    this.ctx = ctx
    this.x = Math.random() * width
    this.y = Math.random() * height
    this.vx = Math.random()
  }
  update() {
    this.x += this.vx * 3
    if (this.x > this.w) {
      this.x = 0
    }
  }
  draw() {
    this.ctx.beginPath()
    this.ctx.arc(this.x, this.y, 1 + this.vx, 0, Math.PI * 2)
    this.ctx.fillStyle = `rgba(255, 255, 255, ${this.vx})`
    this.ctx.fill()
  }
}

// const star = new StarrySky()
// star.onresize()

export default StarrySky
