<template>
  <MenuRow row-title="Cell Properties">
    <form>
      <div class="form-field">
        <label for="live">Living cell color</label>
        <input
          id="live"
          name="live"
          type="color"
          :value="liveColor"
          @click="updateCellProperties"
        >
      </div>
      <div class="form-field">
        <label for="dead">Dead cell color</label>
        <input
          id="dead"
          name="dead"
          type="color"
          :value="deadColor"
          @click="updateCellProperties"
        >
      </div>
      <div class="form-field">
        <label>Cell size</label>
        <input
          id="cellSize"
          name="cellSize"
          type="number"
          :value="size"
          @click="updateCellProperties"
        >
      </div>
    </form>
  </MenuRow>
</template>

<script>
import MenuRow from './MenuRow.vue'
export default {
  name: 'MainMenu',
  components: {
    MenuRow
  },
  data() {
    return {
      size : this.$store.state.cellProperties['size'],
      liveColor : this.$store.state.cellProperties['liveColor'],
      deadColor : this.$store.state.cellProperties['deadColor'],
    }
  },
  methods: {
    updateCellProperties(event) {
      const elem = event.target
      const prop = {'name' : elem.name, 'value' : elem.value}
      this.$store.commit('setCellProperties', prop)
    }
  },
}
</script>
