<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="preparePicture" />
    </div>
  </MenuRow>
</template>

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

  export default {
    name: "Menu2dCA",
    components: {
      MenuRow,
    },
    data() {
      return {
        uploadedFile: "",
      };
    },
    computed: {
      ...mapWritableState(globalStore, ["picture"]),
    },
    methods: {
      ...mapActions(globalStore, [
        "toggleDraw2dLast",
        "toggleDraw2d",
        "toggle2dDrawFromPicture",
      ]),
      preparePicture(event) {
        const files = event.target.files;
        this.picture = new Image();
        this.picture.width = this.canvasWidth;
        if (FileReader && files && files.length) {
          const reader = new FileReader();

          reader.onload = () => {
            this.picture.src = reader.result;
            this.toggle2dDrawFromPicture();
          };

          reader.onerror = () => {
            console.log(reader.error);
          };

          reader.readAsDataURL(files[0]);
        }
      },
    },
  };
</script>
