<template>
  <div class="attribute-calculator">
    <h2>Attribute Calculator</h2>
    <div class="inputs">
      <label>
        Fortitude:
        <input type="number" min="0" v-model.number="fortitude" />
      </label>
      <label>
        Strength:
        <input type="number" min="0" v-model.number="strength" />
      </label>
      <label>
        Dexterity:
        <input type="number" min="0" v-model.number="dexterity" />
      </label>
      <div class="attribute-group">
        <label>Dodge:</label>
        <label>Trained:</label>
        <input type="number" min="0" v-model.number="dodge" />
        <div class="switch">
          <button
            type="button"
            class="switch-button"
            :class="{ active: !dodgeTrained }"
            @click="dodgeTrained = false"
            :title="
              dodgeTrained
                ? 'Click to mark as untrained'
                : 'Currently untrained'
            "
          >
            No
          </button>
          <button
            type="button"
            class="switch-button"
            :class="{ active: dodgeTrained }"
            @click="dodgeTrained = true"
            :title="
              !dodgeTrained ? 'Click to mark as trained' : 'Currently trained'
            "
          >
            Yes
          </button>
        </div>
      </div>
      <div class="attribute-group">
        <label>Stamina:</label>
        <label>Trained:</label>
        <input type="number" min="0" v-model.number="stamina" />
        <div class="switch">
          <button
            type="button"
            class="switch-button"
            :class="{ active: !staminaTrained }"
            @click="staminaTrained = false"
            :title="
              staminaTrained
                ? 'Click to mark as untrained'
                : 'Currently untrained'
            "
          >
            No
          </button>
          <button
            type="button"
            class="switch-button"
            :class="{ active: staminaTrained }"
            @click="staminaTrained = true"
            :title="
              !staminaTrained ? 'Click to mark as trained' : 'Currently trained'
            "
          >
            Yes
          </button>
        </div>
      </div>
    </div>
    <div class="results">
      <p>HP: {{ hp }}</p>
      <p>Defense: {{ defense }}</p>
      <p>Blood: {{ blood }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const fortitude = ref(0);
const strength = ref(0);
const dexterity = ref(0);
const dodge = ref(0);
const stamina = ref(0);
const dodgeTrained = ref(false);
const staminaTrained = ref(false);

const hp = computed(() => 10 + 5 * fortitude.value + strength.value);
const defense = computed(() => {
  let val = 8 + dexterity.value;
  if (dodgeTrained.value) {
    val += dodge.value;
  }
  return val;
});
const blood = computed(() => {
  let val = 14 + fortitude.value;
  if (staminaTrained.value) {
    val += stamina.value;
  }
  return val;
});
</script>

<style scoped src="./AttributeCalculator.css"></style>
