<template>
  <MenuRow row-title="2D Cellular Automaton">
    <div class="form-field">
      <label>Start from empty board</label>
      <input
        type="button"
        name="start2d"
        value="start"
        @click="toggleDraw2d()"
      />
    </div>
    <div class="form-field">
      <label>Start from last result</label>
      <input type="button" value="start" @click="toggleDraw2dLast()" />
    </div>
    <div class="form-field">
      <label>Start from picture</label><br />
      <input type="file" @change="previewFile" />
      <input type="button" value="start" @click="toggleDraw2dLast()" />
    </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, ["toggleDraw2dLast", "toggleDraw2d"]),
      previewFile(event) {
        console.log(event.target.files);
      },
    },
  };
</script>
