<template>
  <Panel
      header="Search"
  >

    <FloatLabel variant="in">
      <InputText
          id="in_label"
          v-model="searchValue"
          @update="$emit('update:modelValue', $event.target.value)"
          autocomplete="off"
      />
      <label for="in_label">Search by Card name</label>
    </FloatLabel>

    <div
        class="flex flex-row gap-2 mt-4"
    >
      <!-- Card Subtype-->
      <Listbox
          class="w-30"
          v-model="selectedCardTypes"
          :options="cardTypes"
          multiple
          optionLabel="name"
      />

      <!-- Monster Card Subtype-->
      <Listbox
          class="w-30"
          v-model="selectedMonsterCardTypes"
          :options="monsterCardTypes"
          multiple
          :disabled="!selectedCardTypes.map(type => type.name).includes('Monster')"
      />

      <!-- Trap Card Subtype-->
      <Listbox
          class="w-30"
          v-model="selectedTrapCardTypes"
          :options="trapCardTypes"
          multiple
          :disabled="!selectedCardTypes.map(type => type.name).includes('Trap')"
      />

      <!-- Spell Card Subtype-->
      <Listbox
          class="w-30"
          v-model="selectedSpellCardTypes"
          :options="spellCardTypes"
          multiple
          :disabled="!selectedCardTypes.map(type => type.name).includes('Spell')"
      />
    </div>
  </Panel>
</template>

<script setup lang="ts">
import {computed, type Ref, ref, watch} from "vue";
import {MonsterCardType, SpellCardType, TrapCardType} from "../api/openapi";

type StringCardType = {
  name: 'Monster' | 'Trap' | 'Spell'
};

const searchValue: Ref<string> = defineModel({
  required: true,
})

const selectedCardTypes: Ref<StringCardType[]> = ref([]);
const selectedMonsterCardTypes: Ref<string[]> = ref([]);
const selectedSpellCardTypes: Ref<string[]> = ref([]);
const selectedTrapCardTypes: Ref<string[]> = ref([]);


const cardTypes = ref([
  {name: 'Monster'},
  {name: 'Trap'},
  {name: 'Spell'}
]);

const monsterCardTypes: Ref<string[]> = ref(
    Object.values(MonsterCardType)
);

const spellCardTypes: Ref<string[]> = ref(
    Object.values(SpellCardType)
);

const trapCardTypes: Ref<string[]> = ref(
    Object.values(TrapCardType)
);
</script>

<style scoped>

</style>