<template>
  <div>
    <slot v-bind="{ open, close }" />
    <v-dialog
      v-model="dialog"
      max-width="988px"
      content-class="top-dialog"
      :scrollable="false"
    >
      <v-card
        :rounded="!$vuetify.display.xs"
        :loading="loading"
      >
        <v-toolbar
          dark
          color="primary-lighten-1"
        >
          <v-text-field
            id="arrow-search"
            v-model="search.query.value"
            autofocus
            variant="solo"
            flat
            autocomplete="off"
            bg-color="primary-lighten-1"
            color="white"
            density="compact"
            class="mx-2 arrow-search"
            hide-details
            single-line
            :placeholder="$t('search.search')"
            :prepend-inner-icon="$globals.icons.search"
          />

          <v-btn
            v-if="$vuetify.display.xs"
            icon
            size="x-small"
            @click="dialog = false"
          >
            <v-icon>
              {{ $globals.icons.close }}
            </v-icon>
          </v-btn>
        </v-toolbar>

        <v-card-actions>
          <div class="mr-auto">
            {{ $t("search.results") }}
          </div>
        </v-card-actions>

        <div class="scroll pa-1" style="max-height: 700px;">
          <RecipeCardMobile
            v-for="(recipe, index) in search.data.value"
            :key="index"
            :tabindex="index"
            class="ma-1 arrow-nav"
            :name="recipe.name ?? ''"
            :description="recipe.description ?? ''"
            :slug="recipe.slug ?? ''"
            :rating="recipe.rating ?? 0"
            :image="recipe.image"
            :recipe-id="recipe.id ?? ''"
            v-bind="$attrs.selected ? { selected: () => handleSelect(recipe) } : {}"
          />
        </div>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useLoggedInState } from "~/composables/use-logged-in-state";
import type { RecipeSummary } from "~/lib/api/types/recipe";
import { useUserApi } from "~/composables/api";
import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
import { usePublicExploreApi } from "~/composables/api/api-client";

const SELECTED_EVENT = "selected";

// Define emits
const emit = defineEmits<{
  selected: [recipe: RecipeSummary];
}>();

const auth = useMealieAuth();
const loading = ref(false);
const selectedIndex = ref(-1);

// ===========================================================================
// Dialog State Management
const dialog = ref(false);

// Reset or Grab Recipes on Change
watch(dialog, (val) => {
  if (!val) {
    search.query.value = "";
    selectedIndex.value = -1;
    search.data.value = [];
  }
});

// ===========================================================================
// Event Handlers

function selectRecipe() {
  const recipeCards = document.getElementsByClassName("arrow-nav");
  if (recipeCards) {
    if (selectedIndex.value < 0) {
      selectedIndex.value = -1;
      document.getElementById("arrow-search")?.focus();
      return;
    }

    if (selectedIndex.value >= recipeCards.length) {
      selectedIndex.value = recipeCards.length - 1;
    }

    (recipeCards[selectedIndex.value] as HTMLElement).focus();
  }
}

function onUpDown(e: KeyboardEvent) {
  if (e.key === "Enter") {
    console.log(document.activeElement);
    // (document.activeElement as HTMLElement).click();
  }
  else if (e.key === "ArrowUp") {
    e.preventDefault();
    selectedIndex.value--;
  }
  else if (e.key === "ArrowDown") {
    e.preventDefault();
    selectedIndex.value++;
  }
  else {
    return;
  }
  selectRecipe();
}

watch(dialog, (val) => {
  if (!val) {
    document.removeEventListener("keyup", onUpDown);
  }
  else {
    document.addEventListener("keyup", onUpDown);
  }
});

const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
watch(route, close);

function open() {
  dialog.value = true;
}
function close() {
  dialog.value = false;
}

// ===========================================================================
// Basic Search
const { isOwnGroup } = useLoggedInState();
const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
const search = useRecipeSearch(api);

// Select Handler
function handleSelect(recipe: RecipeSummary) {
  close();
  emit(SELECTED_EVENT, recipe);
}

// Expose functions to parent components
defineExpose({
  open,
  close,
});
</script>

<style>
.scroll {
  overflow-y: auto;
}
</style>
