<template>
  <MenuRow row-title="Cell Properties">
    <form>
      <div class="form-field">
        <label for="live">Living cell color</label>
        <input
          name="liveColor"
          type="color"
          :value="cellProperties.liveColor"
          @input="updateCellProperties"
        />
      </div>
      <div class="form-field">
        <label for="dead">Dead cell color</label>
        <input
          name="deadColor"
          type="color"
          :value="cellProperties.deadColor"
          @input="updateCellProperties"
        />
      </div>
      <div class="form-field">
        <a name="switchColor" @click="switchColor">Switch Colors</a>
      </div>
      <div class="form-field">
        <label>Cell size</label>
        <input
          name="size"
          type="number"
          min="1"
          :value="cellProperties.size"
          @click="updateCellProperties"
        />
      </div>
    </form>
  </MenuRow>
</template>

<script>
  import { mapActions, mapWritableState } from "pinia";
  import { globalStore } from "../stores/index.js";
  import MenuRow from "./MenuRow.vue";
  export default {
    name: "MenuCellProperties",
    components: {
      MenuRow,
    },
    computed: {
      ...mapWritableState(globalStore, ["cellProperties"]),
    },
    methods: {
      ...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
      getCellProperties(event) {
        const elem = event.target;
        const prop = this.cellProperties;
        return prop[elem.name];
      },
      updateCellProperties(event) {
        const elem = event.target;
        this.cellProperties[elem.name] = elem.value;
        this.setBoardWidth();
        this.setBoardHeight();
      },
      switchColor() {
        [this.cellProperties["liveColor"], this.cellProperties["deadColor"]] = [
          this.cellProperties["deadColor"],
          this.cellProperties["liveColor"],
        ];
      },
    },
  };
</script>
<style scoped>
  a:hover {
    cursor: pointer;
  }
</style>
