<template>
  <div ref="_maze_col" :class="`base_maze ${snapped?'snapped':''}`">
    <canvas :id="elId">Canvas not supported.</canvas>
    <div :class="`cover_overlay ${overlayer} ${overlayerColor}`"
         :style="`--from_x:${color_n1}; --to_x:${color_n2};--g_x:${w}px;--g_h:${h}px;`"></div>
    <slot class="waves_layer"></slot>
  </div>
</template>

<script>
import elementbase from "../mixins/tools/elementbase"

export default {
  name: "BgJpwaves",
  mixins: [elementbase],
  props: {
    color_n1: {
      type: String,
      required: false,
      default: "#507a4b"
    },
    color_n2: {
      type: String,
      required: false,
      default: "#4fca40"
    },
    color_n3: {
      type: String,
      required: false,
      default: "#2ddb17"
    },
    stroke: {
      type: String,
      required: false,
      default: "#000000"
    }
  },
  data() {
    return {
      rendering_id: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.autoGenTime > 100) {
        this.rendering_id = setInterval(() => {
          this.start()
        }, this.autoGenTime)
      }
      this.start()
    })
  },
  beforeDestroy() {
    clearInterval(this.rendering_id)
  },
  methods: {
    start() {
      const render = function () {
        const makeCircle = function (x, y, radius) {
          ctx.beginPath()
          ctx.arc(x, y, radius, 0, Math.PI * 2)
          ctx.stroke()
          ctx.closePath()
        }
        const makeCircles = function (x, y, radius, color) {
          ctx.fillStyle = color

          ctx.beginPath()
          ctx.arc(x, y, radius, 0, Math.PI * 2)
          ctx.fill()
          ctx.stroke()
          ctx.closePath()

          makeCircle(x, y, radius * 0.2, 0, Math.PI * 2)
          makeCircle(x, y, radius * 0.4, 0, Math.PI * 2)
          makeCircle(x, y, radius * 0.6, 0, Math.PI * 2)
          makeCircle(x, y, radius * 0.8, 0, Math.PI * 2)
        }

        for (let col = 0; col <= iterationsY; col++) {
          for (let row = 0; row <= iterationsX; row++) {
            let x = xGap * row
            const y = yGap * col
            let color = "lightblue"

            if (col % 2 === 0) {
              x += radius
            }
            if (row === Math.round(center)) {
              color = "red"
            }
            makeCircles(x, y, radius, color, center, row)
          }

          if (col % 2 === 0) {
            if (center > iterationsX * 0.25) {
              random = Math.random() > 0.5 ? 0 : 1
            } else {
              random = 1
            }
          } else if (center < iterationsX * 0.75) {
            random = Math.random() > 0.5 ? -1 : 0
          } else {
            random = -1
          }
          center += random
        }
      }

      const canvas = document.getElementById(this.elId)
      const ctx = canvas.getContext("2d")
      let width = 0
      let height = 0

      if (!this.snapped) {
        width = canvas.width = window.innerWidth
        height = canvas.height = window.innerHeight
      } else {
        this.setRefsParentDimension(this.$refs._maze_col)
        width = this.w
        height = this.h
      }

      const radius = 50
      const iterationsX = width / radius / 2
      const iterationsY = height / radius * 2
      const xGap = radius * 2
      const yGap = (height + radius * 2) / iterationsY
      let center = Math.round(iterationsX / 2)
      let random

      ctx.strokeStyle = this.stroke
      ctx.lineWidth = 2

      render()
    }
  }
}
</script>
<style scoped lang="scss">
@import "../commonstyle/us";

.base_maze {
  position: absolute;

  .waves_layer {
    z-index: 2;
  }

  .cover_overlay {
    @extend .cover_basic_runner;
    z-index: 1;
    width: 100vw;
    height: 100vh;
  }

  &.snapped {
    .cover_overlay {
      width: var(--g_x);
      height: var(--g_h);;
    }
  }
}

</style>
