<script setup lang="ts">
import { defineProps, ref } from 'vue'

const props = defineProps({
  date: String,
  muscle: String,
  selectedExercise: String,
})

const weightInput = useWeightInputStore()
weightInput.selectedExercise = ref(props.selectedExercise)

const addWorkingSet = () => weightInput.addWorkingSet(props.date, props.muscle, props.selectedExercise)
const removeWorkingSet = () => weightInput.removeWorkingSet(props.date, props.muscle, props.selectedExercise)
const getWorkingSetCount = weightInput.getWorkingSetCount(props.date, props.muscle, props.selectedExercise)
const addWarmUpSet = () => weightInput.addWarmUpSet(props.date, props.muscle, props.selectedExercise)
const removeWarmUpSet = () => weightInput.removeWarmUpSet(props.date, props.muscle, props.selectedExercise)
const getWarmUpSetCount = weightInput.getWarmUpSetCount(props.date, props.muscle, props.selectedExercise)

function restrictToNumbers(event) {
  const charCode = event.which ? event.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    event.preventDefault()
}
</script>

<template>
  <div class="w-2/3 mx-auto">
    <div class="mt-2">
      <label>Warm-Up Sets</label>
      <button
        class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5"
        @click="addWarmUpSet"
      >
        Add
      </button>
      <button
        :disabled="getWarmUpSetCount <= 1"
        class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"
        @click="removeWarmUpSet"
      >
        Remove
      </button>

      <div
        v-for="(warmUpSet, warmUpSetCount) in weightInput.exercises[date][muscle][selectedExercise].warmUpSet"
        :key="warmUpSetCount"
        class="flex ml-2"
      >
        <label>Set {{ warmUpSetCount + 1 }}</label>
        <div class="ml-3">
          <input
            v-model="warmUpSet.warmSetWeight"
            type="number"
            class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
            placeholder="Weight (kg)"
            @keypress="restrictToNumbers"
          >
        </div>
        <div class="ml-3">
          <input
            v-model="warmUpSet.warmSetReps"
            type="number"
            class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
            placeholder="Reps"
            @keypress="restrictToNumbers"
          >
        </div>
      </div>
    </div>

    <div class="working-set mt-5">
      <label>Working Sets</label>
      <button
        class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-7"
        @click="addWorkingSet"
      >
        Add
      </button>
      <button
        :disabled="getWorkingSetCount <= 1"
        class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-2 rounded ml-5 disabled:opacity-25"
        @click="removeWorkingSet"
      >
        Remove
      </button>

      <div v-for="(workingset, workingSetCount) in weightInput.exercises[date][muscle][selectedExercise].workingSet" :key="workingSetCount" class="item flex justify-smart mt-1">
        <label class="">{{ workingSetCount + 1 }}. Set</label>
        <div class="ml-3">
          <input
            v-model="workingset.workingSetWeight"
            type="number"
            class="mt-1 px-3 py-2 border shadow-sm weightInput.exercises[ focus:outline-none block rounded-md sm:text-sm"
            placeholder="Weight (Kg)"
            @keypress="restrictToNumbers"
          >
        </div>
        <div class="ml-3">
          <input
            v-model="workingset.workingSetReps"
            type="number"
            class="mt-1 px-3 py-2 border shadow-sm  focus:outline-none block rounded-md sm:text-sm"
            placeholder="Reps"
            @keypress="restrictToNumbers"
          >
        </div>
      </div>
    </div>
  </div>
</template>
