<template>
  <MenuRow row-title="2D Cellular Automata">
    <div class="form-field">
      <label>Start from last result</label>
      <input type="button" value="start" @click="toggleDraw2dLast()" />
    </div>
    <div class="form-field">
      <input
        type="button"
        name="start2d"
        value="start"
        @click="toggleDraw2d()"
      />
      <input
        type="button"
        name="stop"
        class="stop"
        value="stop"
        @click="toggleStop()"
      />
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="toggleReset()"
      />
    </div>
  </MenuRow>
</template>

<script>
  import { mapActions } from "pinia";
  import MenuRow from "./MenuRow.vue";
  import { globalStore } from "../stores/index.js";

  export default {
    name: "Menu2dCA",
    components: {
      MenuRow,
    },
    methods: {
      ...mapActions(globalStore, [
        "toggleDraw2d",
        "toggleDraw2dLast",
        "toggleReset",
        "toggleStop",
      ]),
    },
  };
</script>
