<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import CourseCard from "@/components/CourseCard.vue";

const { t } = useI18n();
const store = useMainStore();

onMounted(() => {
  store.getFavoriteClass();
});

let favorites = reactive({
  list: [],
});

let favoritesAll = reactive({
  list: [],
});

let token = store.token;
let progress = ref(true);

// 取得收藏課程
async function getFavoriteClass() {
  try {
    const response = await axios.get(
      // `${store.apiUrl}/api/get_favorite_class?access_token=${token}`
      `${store.apiUrl}/api/get_favorite_class?access_token=${token}`
    );
    console.log(
      "response.data.favorite_courses",
      response.data.favorite_courses
    );
    progress.value = false;
    favorites.list = response.data.favorite_courses.filter(
      (item) => item.msg !== `this class doesn't exit`
    );
    favoritesAll.list = response.data.favorite_courses.filter(
      (item) => item.msg !== `this class doesn't exit`
    );
  } catch (error) {
    progress.value = false;
    console.error(error);
  }
}

getFavoriteClass();

let timeoutId = null;
let searchError = ref(false);
const searchText = ref("");
const filtered = reactive({
  list: [],
});

watch(searchText, (val) => {
  if (val === "") {
    favorites.list = favoritesAll.list;
  }
});

// 延遲觸發
const handleInput = () => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(handleSearch, 500);
};

// 課程搜尋
const handleSearch = () => {
  filtered.list = favorites.list.filter((item) =>
    item.name.includes(searchText.value)
  );
  if (filtered.list.length) {
    favorites.list = filtered.list;
    searchError.value = false;
  } else {
    favorites.list = favoritesAll.list;
    searchError.value = true;
    setTimeout(() => {
      searchError.value = false;
    }, 2000);
  }
  console.log("filtered", filtered);
};
</script>

<template>
  <v-card class="h-100">
    <div class="title">
      <h4>{{ t("navbar.collections") }}</h4>
    </div>
    <v-text-field
      v-model.lazy="searchText"
      class="ms-5 mt-5"
      hide-details
      @input="handleInput"
    >
      <template v-slot:label>
        <span>
          {{ t("search_courses") }}
          <v-icon icon="mdi-text-box-search-outline" class="pb-1 ps-1"></v-icon>
        </span>
      </template>
    </v-text-field>
    <div class="error">
      <div v-if="searchError" class="d-flex align-center ms-6 pt-2">
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        {{ t("no_found") }}
      </div>
    </div>
    <v-container class="pa-0 pa-sm-3">
      <v-row>
        <v-col cols="12" v-if="!favorites.list.length && !progress">
          <router-link to="/setup-courses" class="hint-item">
            <v-icon color="purple" icon="mdi-bookmark" class="mb-2"></v-icon>
            <p>
              收藏是空的喔！ <br />
              趕快前往探索課程找尋感興趣的課程吧！
            </p>
          </router-link>
        </v-col>
        <v-col
          sm="4"
          cols="12"
          v-for="(item, index) in favorites.list"
          :key="index"
          class="pa-5"
        >
          <CourseCard
            v-if="item.msg !== `this class doesn't exit`"
            :data="item"
          />
        </v-col>
      </v-row>

      <div
        v-if="progress"
        class="d-flex align-center justify-center fill-height mt-5"
      >
        <v-progress-circular
          color="grey-lighten-4"
          indeterminate
        ></v-progress-circular>
      </div>
    </v-container>
  </v-card>
</template>

<style lang="scss" scoped>
.error {
  height: 1.5em;
}
</style>
