<template>
  <MenuRow row-title="Elementary Cellular Automata">
    <form>
      <div class="form-field">
        <label>
          Initial state presets
          <br />
          <select
            name="initialStates"
            :value="initialState"
            @input="updateInitialState"
          >
            <option
              v-for="(state, index) in initialStates"
              :key="'initial-state-elementary' + index"
              :value="state.id"
            >
              {{ state.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <label>Rules</label>
      </div>
      <div class="form-field">
        <label
        >Rules presets
          <br />
          <select
            name="ruleset-elementary"
            :value="rules.name"
            @input="updateRules"
          >
            <option
              v-for="(ruleset, index) in presetRules"
              :key="'ruleset-preset-elementary-' + index"
              :value="ruleset.name"
            >
              {{ ruleset.name }}
            </option>
          </select>
        </label>
      </div>
      <div class="form-field">
        <a style="cursor: pointer" @click="copyRules">copy rules</a>
      </div>
      <div
        v-for="(rule, name, index) in rules.rules"
        :key="'rule-' + index"
        class="form-field"
      >
        <label
        >{{ name }}
          <input
            :value="rule"
            type="checkbox"
            :name="name"
            :checked="rule"
            @input="updateSingleRule"
          />
        </label>
      </div>
    </form>
    <div class="form-field">
      <input type="button" name="start" value="start" @click="draw1d" />
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="reset"
      />
    </div>
  </MenuRow>
</template>

<script>
  import { mapActions, mapState, mapWritableState } from 'pinia'
  import { presetRules, initialStates } from "./preset.js"
  import { globalStore } from "../stores/index.js";
  import MenuRow from "./MenuRow.vue";
  export default {
    name: "MenuElementaryCA",
    components: {
      MenuRow,
    },
    data() {
      return {
        presetRules: presetRules,
        initialStates: initialStates,
      };
    },
    computed: {
      ...mapWritableState(
        globalStore, {
          initialState: "initial1dState",
        }
      ),
      ...mapState(
        globalStore, {
          rules: "rules1d"
        }
      ),
      rules1dFileName() {
        return (
          Object.keys(this.rules)
                .map((index) => {
                  return this.rules[index];
                })
                .join("_") + ".json"
        );
      },
    },
    methods: {
      ...mapActions(globalStore, ["draw1d", "reset"]),
      copyRules() {
        const rules = JSON.stringify(this.rules);
        navigator.clipboard.writeText(rules);
      },
      isCurrentPreset(event) {
        const elem = event.target;
        return this.initialState === elem.value;
      },
      updateSingleRule(event) {
        const elem = event.target;
        const value = elem.checked ? 1 : 0;
        this.rules.rules[elem.name] = value;
      },
      updateRules(event) {
        const elem = event.target;
        const name = elem.value;
        const newRuleset = this.presetRules.find((ruleset) => {
          return ruleset.name === name;
        });
        this.rules.rules = newRuleset.rules
      },
      updateInitialState(event) {
        const elem = event.target;
        this.initial1dState = elem.value
      },
    },
  };
</script>
<style>
  .menu-row a {
     color: white;
     font-weight: bold;
     text-decoration: none;
     font-size: small;
  }
</style>
