<script setup>
const props = defineProps({
  muscle: String,
})

const exerciseStore = useExerciseStore()
const weightInput = useWeightInputStore()
const exercises = ref([])
const selectedExercise = ref(null)

const selectedDate = ref(new Date().toISOString().substr(0, 10))

onMounted(() => {
  exercises.value = exerciseStore.getExercisesByMuscle(props.muscle)
},
)

// filter exercises with help from https://blog.logrocket.com/create-search-bar-vue/ last accessed 05.05.2023
const input = ref('')
function filterExercises() {
  return exercises.value.filter((exercise) => {
    return exercise.name.toLowerCase().includes(input.value.toLowerCase())
  })
}

function isActiveExercise(exercise) {
  // TODO: Implement (exercise in weightInput.exercises) to show which exercise are edited, or put them in a proper seperate list
  return { 'exercise-list-button exerciseItem': selectedExercise.value !== exercise, 'exercise-list-button-active exerciseItem': selectedExercise.value === exercise }
}

function exerciseClick(exercise) {
  selectedExercise.value = exercise.name
}

function initSetInput() {
  weightInput.initSetsInputs(selectedDate.value, props.muscle, selectedExercise.value)
}
</script>

<template>
  <div class="flex flex-col">
    <div class="flex">
      <div class="w-1/4">
        <input
          v-model="input"
          class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-full"
          type="text"
          placeholder="Search..."
        >
      </div>
      <div class="w-3/4 flex justify-end">
        <input
          id="date"
          v-model="selectedDate"
          type="date"
          class="text-black py-2 px-2 mt-5 rounded-md mb-4 w-2/4"
        >
      </div>
    </div>

    <div>
      <div class="flex flex-col">
        <div class="flex flex-row">
          <div class="w-1/4">
            <button v-for="exercise in filterExercises()" :key="exercise.name" :class="isActiveExercise(exercise.name)" @click="exerciseClick(exercise); initSetInput()">
              {{ exercise.name }}
            </button>
          </div>
          <div v-if="selectedExercise" class="w-3/4">
            <WeightForm :date="selectedDate" :muscle="muscle" :selected-exercise="selectedExercise" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.exercise-list-button {
  @apply bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-2 rounded my-1 w-full;
}

.exercise-list-button-active {
  @apply bg-green-600 text-white font-bold py-2 px-2 rounded mb-1 w-full;
}

.weights{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    margin-top: 0.5rem;
    margin-left: 5rem;
    color: white;
}

.set{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.5rem;
    color: white;

}
</style>
