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

  const store = globalStore();

  const updateCanvasHeight = (event) => {
    const elem = event.target;
    store.canvasHeight = elem.value;
  };

  const updateCanvasWidth = (event) => {
    const elem = event.target;
    store.canvasWidth = elem.value;
  };

  const updateRefreshRate = (event) => {
    const elem = event.target;
    store.refreshRate = elem.value;
  };

  const updateDrawingDirection = (event) => {
    const elem = event.target;
    const value = elem.checked ? "x" : "y";
    store.drawingDirection = value;
  };
</script>

<template>
  <MenuRow row-title="General Options">
    <form>
      <div class="form-field">
        <label>Canvas Resolution</label>
      </div>
      <div class="form-field">
        <label>Width</label>
        <input
          id="canvasWidth"
          name="canvasWidth"
          type="number"
          step="10"
          :value="store.canvasWidth"
          @input="updateCanvasWidth"
        />
      </div>
      <div class="form-field">
        <label>Height</label>
        <input
          id="canvasHeight"
          name="canvasHeight"
          type="number"
          step="10"
          :value="store.canvasHeight"
          @input="updateCanvasHeight"
        />
      </div>
      <div class="form-field">
        <label>Refresh Rate (ms)</label>
      </div>
      <div class="form-field">
        <input
          id="refreshRate"
          name="refreshRate"
          type="number"
          min="100"
          step="100"
          :value="store.refreshRate"
          @input="updateRefreshRate"
        />
      </div>
      <div class="form-field">
        <label
          >Invert Drawing Direction
          <input
            type="checkbox"
            :checked="store.drawingDirection === 'x'"
            :value="store.drawingDirection"
            @input="updateDrawingDirection"
          />
        </label>
      </div>
    </form>
  </MenuRow>
</template>
