<script>
import {mapGetters, mapActions, useStore} from "vuex"
import Spinner from "@molecules/VSpinner/VSpinner.vue"
import {PushAfterTimeout} from '@store/hooks/PushAfterTimeout'
import Accordion from '@atoms/VAccordion.vue'

export default {
  name: 'FinderPacks',
  components: {
    Spinner,
    Accordion
  },
  setup() {
    const store = useStore()
    store.dispatch('finder_packs/uploadData')
  },
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters('finder_packs', ['packsGroups', 'searchValue', 'isOpen']),
  },
  unmounted() {
    const store = useStore();
    store.dispatch('finder_packs/resetStore')
  },
  methods: {
    ...mapActions('finder_packs', ['updateSearch']),
    updateSearchValue: function(e) {
      const searchInput = new PushAfterTimeout('searchInput', 1500, 'right-[25px] top-[53%]')
      if (searchInput.input) {
        setTimeout(() => {
          this.updateSearch(e.target.value)
        }, 1500)
      }
    },
  }
}

</script>


<template>
  <div class="rounded w-full transition-all min-h-[500px] relative">
    <div
      v-if="!packsGroups"
      id="dataLoader"
      class="h-full absolute inset-0 flex flex-row items-center grow transition items-center justify-center bg-light appear_from_opacity-3 z-30 rounded p-2"
    >
      <Spinner style="padding: 0" />
    </div>
    <div
      v-if="packsGroups"
      phx-change="update_pack_filter"
      class="p-5 flex flex-col gap-4 bg-light relative items-center"
    >
      <div
        id="searchInput"
        class="w-full flex flex-col gap-2"
      >
        <div class="font-bold">
          Поиск (название и номер):
        </div>
        <input
          :value="searchValue"
          :status="status"
          class="pl-2 py-1 rounded-r-md w-full max-h-[29px] text-sm border-none focus-visible:outline-blue-300"
          placeholder="Название и номер через пробел"
          @change="updateSearchValue"
        >
      </div>
      <div class="border-2 rounded-lg w-full bottom-0" />
    </div>
    <div
      v-if="packsGroups?.length === 0"
      id="no_data"
      class="w-full min-h-[80vh] bg-light dark:bg-slate-900 dark:text-slate-300 relative"
    >
      <div class="flex items-center justify-center text-lg font-bold pt-5">
        Пакеты не найдены
      </div>
    </div>
    <div class="bg-light">
      <div
        v-if="packsGroups?.length > 0"
        class="grid grid-cols-12 gap-3 p-4"
      >
        <div
          v-for="(group, idx) in packsGroups"
          :key="idx"
          class="col-span-12 sm:col-span-6 lg:col-span-4"
        >
          <Accordion
            :id="`pack_group_${group.pack_group_id}`"
            :isOpen="isOpen"
          >
            <template #header>
              <div
                v-if="group.order_index"
                id="packsInfoTitle"
                class="font-bold text-sm"
              >
                <span class="text-slate-500 font-bold">
                  {{ group.order_index }}. 
                </span>
                <span class="font-bold">
                  {{ group.title }}
                </span>
              </div>
            </template>
            <template #body>
              <div class="flex flex-col gap-2">
                <table>
                  <thead>
                    <tr>
                      <th class="items-center justify-center pb-2">
                        Название
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(struct, index) in group.pack_structs" 
                      :key="index"
                    >
                      <td class="items-center justify-center py-2">
                        <div class="flex gap-2 w-full">
                          <div class="w-full text-left decoration-dashed cursor-pointer hover:text-slate-800 transition-all">
                            {{ struct.name }}
                          </div>
                          <a
                            class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
                            target="_blank"
                            :href="`/html/packs/${group.link}?pack=${struct.name}`"
                          >
                            таблица
                          </a>
                          <a
                            class="bg-slate-500 hover:bg-slate-700 text-white text-xs font-bold py-1 px-3 rounded transition-all h-fit"
                            target="_blank"
                            :href="`/admin_panel/packs/${group.pack_group_id}/${struct.id}`"
                          >карточка</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </template>
          </Accordion>
        </div>
      </div>
    </div>
  </div>
</template>