<template>
  <main id="main">
    <canvas
      id="canvas"
      ref="canvas"
      width="500"
      height="500"
    />
  </main>
</template>
<script>
import { initialState1d, createBoard } from '../modules/automata.js'
import { getRandomInt } from '../modules/common.js'
import {mapGetters} from 'vuex'
export default {
  name: 'Canvas',
  data() {
    return {
      canvas: null,
      ctx: null,
    }
  },
  computed: {
    ...mapGetters({
      cellProperties: 'getCellProperties',
      rules: 'getRuleSet1d',
    })
  },
  mounted() {
    this.canvas = this.$refs['canvas']
    this.canvas.width = 1280
    this.canvas.height = 720
    this.ctx = this.canvas.getContext('2d')
    this.$root.$on('draw1d', () => { this.draw1d() })
    this.$root.$on('reset', () => { this.reset() })
  },
  methods: {
    drawCanvas(board) {
      const props = this.cellProperties
      board.map((row, y) => {
        const d = props.size
        return row.map(
          (cell, x) => {
            this.ctx.fillStyle = (
              () => {
                if (cell === 1) return props.liveColor
                return props.deadColor
              })()
            this.ctx.fillRect(x * d, y * d, d, d)
            return cell
          },
        )
      })
    },
    async draw1d() {
      const initialState = initialState1d(
        Math.floor(this.canvas.width / this.cellProperties.size),
        getRandomInt,
        [0, 2],
      )
      const board = createBoard(
        initialState,
        this.rules,
        Math.floor(this.canvas.height / this.cellProperties.size)
      )
      this.drawCanvas(board)
    },
    reset() {
      this.$root.$store.state.drawing = 0;
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    }
  }
}
</script>

