<template>
  <div :id="elId">
    <canvas ref="gon"></canvas>
  </div>
</template>

<script>

import elementbase from "../mixins/tools/elementbase"
import { ColorTool, hexToRgb } from ".."

export default {
  name: "BgEop",
  mixins: [elementbase],
  props: {
    eopColor: {
      type: String,
      required: false,
      default: ""
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      const canvas = this.$refs.gon
      const ctx = canvas.getContext("2d")
      this.updateRenderSize()
      canvas.width = this.w
      canvas.height = this.h

      const pCW = this.w / 100
      const pCWmin = Math.floor(pCW * 45)
      const pCWmax = Math.floor(pCW * 55)

      const pCH = this.h / 100
      const pCHmin = Math.floor(pCH * 45)
      const pCHmax = Math.floor(pCH * 55)

      /*     window.addEventListener("resize", function () {
             ctx.canvas.width =  canvas.width ;
             ctx.canvas.height =  canvas.height;
           }); */

      // Circle Sizes
      const maxRadiusNano = 3
      const minRadiusNano = 1

      const maxRadiusSmall = 20
      const minRadiusSmall = 5

      const maxRadiusBig = 150
      const minRadiusBig = 100

      // Amount of Circles
      const maxCirclesNano = 5000
      const maxCirclesSmall = 300
      const maxCirclesBig = 5

      // Offset for Lightness (HSL)
      const colOffset = 50
      let radius = 0
      let xPos = 0
      let yPos = 0

      const H = Math.floor(Math.random() * 361) + 0
      const S = Math.floor(Math.random() * 60) + 20
      let L = Math.floor(Math.random() * 60) + 20

      let gHSL

      const eop_c = this.eopColor

      if (this.eopColor) {
        const r = hexToRgb(this.eopColor)
        const cc = new ColorTool(r.r, r.g, r.b, "spec")
        const d = cc.data()
        gHSL = `hsl(${d.h}, ${d.s}%, ${d.l}%)`
      }

      function drawCircleBig() {
        radius = Math.floor((Math.random() * maxRadiusBig) + minRadiusBig)
        xPos = Math.floor((Math.random() * pCWmax) + pCWmin) - radius / 2
        yPos = Math.floor((Math.random() * pCHmax) + pCHmin) - radius / 2

        const Lo = Math.floor((Math.random() * colOffset) + 1)
        if (L < 50) {
          L = L + Lo
        } else {
          L = L - Lo
        }

        const HSL = gHSL || `hsl(${H}, ${S}%, ${L}%)`

        ctx.beginPath()
        ctx.fillStyle = HSL
        ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()
      }

      function drawCircleSmall() {
        radius = Math.floor((Math.random() * maxRadiusSmall) + minRadiusSmall)
        xPos = Math.floor((Math.random() * canvas.width) + radius)
        yPos = Math.floor((Math.random() * canvas.height) + radius)

        const Lo = Math.floor((Math.random() * colOffset) + 1)
        if (L < 50) {
          L = L + Lo
        } else {
          L = L - Lo
        }

        const HSL = `hsl(${H}, ${S}%, ${L}%)`

        ctx.beginPath()
        if (gHSL) {
          const r = hexToRgb(eop_c)
          const cc = new ColorTool(r.r, r.g, r.b, "spep")
          ctx.fillStyle = cc.dimr(5)
        } else {
          ctx.fillStyle = HSL
        }
        ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()
      }

      function drawCircleNano() {
        radius = Math.floor((Math.random() * maxRadiusNano) + minRadiusNano)
        xPos = Math.floor((Math.random() * canvas.width) + radius)
        yPos = Math.floor((Math.random() * canvas.height) + radius)

        const Lo = Math.floor((Math.random() * colOffset) + 1)
        if (L < 50) {
          L = L + Lo
        } else {
          L = L - Lo
        }
        ctx.beginPath()
        if (gHSL) {
          const r = hexToRgb(eop_c)
          const cc = new ColorTool(r.r, r.g, r.b, "spec")
          ctx.fillStyle = cc.dimr(10)
        } else {
          ctx.fillStyle = `hsl(${H}, ${S}%, ${L}%)`
        }

        ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI)
        ctx.fill()
        ctx.closePath()
      }

      if (this.clickGen) {
        canvas.addEventListener("click", () => {
          this.updateRenderSize()

          ctx.canvas.width = this.w
          ctx.canvas.height = this.h
          ctx.clearRect(0, 0, this.w, this.h)

          for (let i = 0; i < maxCirclesBig; i++) {
            drawCircleBig()
          }
          for (let i = 0; i < maxCirclesSmall; i++) {
            drawCircleSmall()
          }
          for (let i = 0; i < maxCirclesNano; i++) {
            drawCircleNano()
          }
        })
      }

      for (let i = 0; i < maxCirclesBig; i++) {
        drawCircleBig()
      }
      for (let i = 0; i < maxCirclesSmall; i++) {
        drawCircleSmall()
      }
      for (let i = 0; i < maxCirclesNano; i++) {
        drawCircleNano()
      }
    }
  }
}
</script>

<style scoped lang="scss">

#canvas {
  width: 100%;
  height: 100%;
}

</style>
