<template>
    <div class="container search-home-p">
        <ClientOnly>
            <div class="search-home row">
              <div class="inp col-12 col-lg-3">
                <label for=""> {{ $t("brand") }} </label>
                <div
                  v-if="dropdown1"
                  :id="dropdown1.id"
                  class="dropdown-container search"
                  @click="dropdown1.toggle()"
                >
                  <button class="dropdown-toggle-container">
                    {{ dropdown1.selected }}
                    <img src="~/assets/imgs/Small2.svg" alt="" width="12" height="12" loading="lazy" />
                  </button>
                  <!--  -->
                  <div
                    v-if="dropdown1.isOpen"
                    ref="dropdownMenu"
                    class="dropdown-menu"
                    @click.stop
                  >
                    <!-- @click.prevent="dropdown1.select(item.title)" -->
                    <div class="px-3 searchInput d-flex align-items-center gap-2">
                      <input
                        type="text"
                        v-model="search1"
                        :placeholder="$t('search')"
                      />
                      <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                <IconSearch></IconSearch>

                    </div>
                    <div
                      v-if="dropdown1.items"
                      class="dropdown-item"
                      v-for="(item, index) in searchDropDown1"
                      :class="{
                        'load-more-dropdown': index + 1 == searchDropDown1.length,
                      }"
                      @click.prevent="
                        dropdown1.select2(item?.name),
                          store.getCarsByBrand3(item.id),
                          (searchDropDown2 = item?.models),
                          (selectedBrand = item.id)
                      "
                      :key="item.id"
                      :for="`checkBox-${item.id}`"
                    >
                      <span>
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="inp col-12 col-lg-3">
                <label for=""> {{ $t("model") }} </label>
                <div
                  v-if="dropdown2"
                  :id="dropdown2.id"
                  class="dropdown-container search"
                  @click="dropdown2.toggle()"
                >
                  <button class="dropdown-toggle-container">
                    {{ dropdown2.selected }}
                    <img src="~/assets/imgs/Small2.svg" alt="" width="12" height="12" loading="lazy" />
                  </button>
                  <div v-if="dropdown2.isOpen" class="dropdown-menu" @click.stop>
                    <!-- @click.prevent="dropdown1.select(item.title)" -->
                    <div class="px-3 searchInput d-flex align-items-center gap-2">
                      <input
                        type="text"
                        v-model="search2"
                        :placeholder="$t('search')"
                      />
                      <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                <IconSearch></IconSearch>

                    </div>
                    <div
                      class="dropdown-item"
                      v-for="item in filterDropdown2"
                      @click.prevent="
                        dropdown2.select2(item?.name),
                          (searchDropDown3 = item?.cars),
                          (selectedmodel = item.id)
                      "
                      :key="item.id"
                      :for="`checkBox-${item.id}`"
                    >
                      <span>
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="inp col-12 col-lg-3">
                <label for=""> {{ $t("name") }} </label>
                <div
                  v-if="dropdown3"
                  :id="dropdown3.id"
                  class="dropdown-container search"
                  @click="dropdown3.toggle()"
                >
                  <button class="dropdown-toggle-container">
                    {{ dropdown3.selected }}
                    <img src="~/assets/imgs/Small2.svg" alt="" width="12" height="12" loading="lazy"/>
                  </button>
                  <div v-if="dropdown3.isOpen" class="dropdown-menu" @click.stop>
                    <!-- @click.prevent="dropdown1.select(item.title)" -->
                    <div class="px-3 searchInput d-flex align-items-center gap-2">
                      <input
                        type="text"
                        v-model="search3"
                        :placeholder="$t('search')"
                      />
                      <!-- <i class="fa-solid fa-magnifying-glass"></i> -->
                <IconSearch></IconSearch>
                    </div>
                    <div
                      class="dropdown-item"
                      v-for="item in filterDropdown3"
                      @click.prevent="
                        dropdown3.select2(item?.name), (selectedCar = item.id)
                      "
                      :key="item.id"
                      :for="`checkBox-${item.id}`"
                    >
                      <span>
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <nuxt-link
              aria-label="search"
                class="searchBtn mt-2"
                :to="
                  localePath({
                    path: '/cars',
                    query: {
                      car_id: selectedCar,
                      id: selectedBrand,
                      model: selectedmodel,
                    },
                  })
                "
              >
                {{ $t("search") }}
              </nuxt-link>
            </div>
        </ClientOnly>
    </div>
</template>
<script setup>
import { useHomeStore } from "@/stores/home";
const localePath = useLocalePath();
const { t, locale, setLocale } = useI18n();
let store = useHomeStore();
let dropdownVal1 = ref(
  locale.value == "ar" ? "اختر ماركة السيارة " : "choose car brand"
);
let dropdownVal2 = ref(
  locale.value == "ar" ? "اختر موديل السيارة " : "choose car model"
);
let dropdownVal3 = ref(
  locale.value == "ar" ? "اختر اسم السيارة " : "choose car name"
);
let search1 = ref('');
let search2 = ref('');
let search3 = ref('');
let selectedBrand = ref();
let selectedCar = ref();
let selectedmodel = ref();
const dropdown1 = ref(process.client ? new Dropdown(dropdownVal1.value) : null);
const dropdown2 = ref(process.client ? new Dropdown(dropdownVal2.value) : null);
const dropdown3 = ref(process.client ? new Dropdown(dropdownVal3.value) : null);

const dropdownMenu = ref(null);
const handleClickOutside = (event) => {
  if (dropdown1.value) {
    dropdown1.value.handleClickOutside(event);
    dropdown2.value.handleClickOutside(event);
    dropdown3.value.handleClickOutside(event);
  }
};
const handleScroll = () => {
  const dropdownElement = dropdownMenu.value;
  const searchButton = document.querySelector(".load-more-dropdown");
  if (searchButton) {
    const isAtBottom =
      dropdownElement.scrollHeight - dropdownElement.scrollTop <=
      dropdownElement.clientHeight;
    if (isAtBottom) {
      console.log("dddddddddddddd");
    }
  }
};

watch(
  () => dropdown1.value.isOpen,
  async (isOpen) => {
    if (isOpen) {
      await nextTick(); // Wait for the DOM to update
      if (dropdownMenu.value) {
        dropdownMenu.value.addEventListener("scroll", handleScroll);
        console.log(dropdownMenu.value);
      }
    } else if (dropdownMenu.value) {
      dropdownMenu.value.removeEventListener("scroll", handleScroll);
    }
  }
);

let searchDropDown1 = computed(() => {
  return dropdown1.value.items.filter((ele) => {
    return ele.name.toLowerCase().includes(search1.value.toLowerCase());
  });
});
let searchDropDown2 = ref([]);
let searchDropDown3 = ref([]);

let filterDropdown2 = computed(() => {
  return searchDropDown2.value.filter((ele) => {
    return ele.name.toLowerCase().includes(search2.value.toLowerCase());
  });
});
let filterDropdown3 = computed(() => {
  return searchDropDown3.value.filter((ele) => {
    return ele.name.toLowerCase().includes(search3.value.toLowerCase());
  });
});

watch(
  [
    () => store.SearchCars2,
    () => store.brands,
    () => store.SearchModels2,
    () => store.brands2,
  ],
  ([val1, val2, val3, val4]) => {
    // obj.value.val1 = val1.id;
    // obj.value.val2 = val2.id;
    // obj.value.val3 = val3.id;
    console.log(val3);
    dropdown1.value.items = val4;
    dropdown2.value.items = val3;
    dropdown3.value.items = val1;
    console.log(val1);
  }
);



watch(
  () => searchDropDown2.value,
  (val) => {
    if (val.length == 0) {
      searchDropDown3.value = [];
      selectedCar.value = undefined;
      selectedmodel.value = undefined;
      dropdown2.value.selected = dropdownVal2.value;
      dropdown3.value.selected = dropdownVal3.value;
    }
  }
);

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
  // dropdown1.value.items = brandsArr.value;
  dropdown2.value.items = store.models;
  dropdown3.value.items = store.SearchCars2;
});
onUnmounted(() => {
  if (dropdownMenu.value) {
    dropdownMenu.value.removeEventListener("scroll", handleScroll);
  }
  document.removeEventListener("click", handleClickOutside);
});
</script>
<style lang="">

</style>